Moved to a folder

src/components/Counter/Counter.sass

@@ -0,0 +1,47 @@
+.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
+
+    // &:hover
+    // background: color.adjust(vars.$primaryColor, $blackness: 20%)
+
+
+  &__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)

src/components/Counter/Counter.tsx

@@ -0,0 +1,30 @@
+import './Counter.sass'
+import { createSignal } from 'solid-js'
+
+let [count, setCount] = createSignal(0)
+
+const increment = () => {
+  setCount(count() + 1)
+}
+
+const decrement = () => {
+  setCount(count() - 1)
+}
+
+export default () => {
+  return (
+    <>
+      <section class="counter">
+        <div class="counter__display">{count()}</div>
+        <div class="counter__buttons">
+          <button class="counter__decrement" onClick={decrement}>
+            -
+          </button>
+          <button class="counter__increment" onClick={increment}>
+            +
+          </button>
+        </div>
+      </section>
+    </>
+  )
+}