Updated

src/components/Counter.astro

@@ -0,0 +1,79 @@
+---
+const count = 0
+---
+
+<script>
+  let count = 0
+
+  // }
+  const updateDisplay = () => {
+    const countdisplay = document.getElementById('countdisplay')!
+    countdisplay.textContent = count
+  }
+
+  const decrement = document.getElementById('decrement')!
+  decrement.addEventListener('click', () => {
+    count--
+    updateDisplay()
+  })
+
+  const increment = document.getElementById('increment')!
+  increment.addEventListener('click', () => {
+    count++
+    updateDisplay()
+  })
+</script>
+
+<section class="counter">
+  <div class="counter__display" id="countdisplay">{count}</div>
+  <div class="counter__buttons">
+    <button class="counter__decrement" id="decrement"> - </button>
+    <button class="counter__increment" id="increment"> + </button>
+  </div>
+</section>
+
+<style lang="sass">
+  .counter
+    display: flex
+    flex-direction: column
+    align-items: center
+    gap: 1rem
+    margin: 2rem
+    color: white
+    border: 1px solid rgba(22, 34, 60, 0.5)
+    padding: 1rem 2rem
+    border-radius: 16px
+    background: rgba(134, 152, 217, 0.1)
+
+    &__display
+      font-size: 1.75rem
+      font-weight: bold
+
+    &__buttons
+      display: flex
+      justify-content: center
+      gap: 0.25rem
+
+    &__decrement
+      width: 2rem
+      height: 2.25rem
+      padding: auto
+      font-size: 1rem
+      font-weight: bold
+      cursor: pointer
+      text-decoration: none
+      background-color: rgba(86, 14, 14, 0.915)
+      border-radius: 8px
+      color: white
+      border: 1px solid rgba(255,255,255,0.2)
+
+      &:active
+        transform: scale(0.95)
+
+    &__increment
+      @extend .counter__decrement
+      background-color: rgb(14, 42, 86, 0.915)
+
+      &:active
+        transform: scale(0.95)
+</style>