feat: turn links into buttons

Author: remvze

src/components/categories/category-icons/category-icons.module.css

@@ -18,32 +18,29 @@
     align-items: center;
     justify-content: center;
 
-    & a {
-      color: inherit;
-      text-decoration: none;
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      font-size: var(--font-md);
+      color: var(--color-foreground);
+      cursor: pointer;
+      background: linear-gradient(
+        var(--color-neutral-50),
+        var(--color-neutral-100)
+      );
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+      transition: 0.2s;
 
-      & .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 48px;
-        height: 48px;
-        font-size: var(--font-md);
+      &:hover {
         background: linear-gradient(
-          var(--color-neutral-50),
-          var(--color-neutral-100)
+          var(--color-neutral-100),
+          var(--color-neutral-200)
         );
-        border: 1px solid var(--color-neutral-300);
-        border-radius: 50%;
-        transition: 0.2s;
-
-        &:hover {
-          background: linear-gradient(
-            var(--color-neutral-100),
-            var(--color-neutral-200)
-          );
-          transform: scale(1.15);
-        }
+        transform: scale(1.15);
       }
     }
   }

src/components/categories/category-icons/category-icons.tsx

@@ -7,6 +7,11 @@ import { Tooltip } from '@/components/tooltip';
 export default function CategoryIcons() {
   const categories = useMemo(() => sounds.categories, []);
 
+  const goto = (id: string) => {
+    const category = document.getElementById(`category-${id}`);
+    category?.scrollIntoView();
+  };
+
   return (
     <Container>
       <div className={styles.wrapper}>
@@ -15,11 +20,18 @@ export default function CategoryIcons() {
           <Tooltip.Provider delayDuration={0}>
             {categories.map(category => {
               return (
-                <a href={`#category-${category.id}`} key={category.id}>
-                  <Tooltip content={category.title} placement="bottom">
-                    <div className={styles.icon}>{category.icon}</div>
-                  </Tooltip>
-                </a>
+                <Tooltip
+                  content={category.title}
+                  key={category.id}
+                  placement="bottom"
+                >
+                  <button
+                    className={styles.icon}
+                    onClick={() => goto(category.id)}
+                  >
+                    {category.icon}
+                  </button>
+                </Tooltip>
               );
             })}
           </Tooltip.Provider>