Merge pull request #84 from amir-rahmanii/feat/add-category-icons

feat: add category icons

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

@@ -0,0 +1,50 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 80px;
+
+  & .title {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .categoryIconsWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+    align-items: center;
+    justify-content: center;
+
+    & a {
+      color: inherit;
+      text-decoration: none;
+
+      & .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 50px;
+        font-size: var(--font-lg);
+        background: linear-gradient(
+          var(--color-neutral-50),
+          var(--color-neutral-100)
+        );
+        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);
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+import { sounds } from '@/data/sounds';
+import { useMemo } from 'react';
+import styles from './category-icons.module.css';
+import { Container } from '@/components/container';
+import { Tooltip } from '@/components/tooltip';
+
+export default function CategoryIcons() {
+  const categories = useMemo(() => sounds.categories, []);
+
+  return (
+    <Container>
+      <div className={styles.wrapper}>
+        <h3 className={styles.title}>Categories</h3>
+        <div className={styles.categoryIconsWrapper}>
+          {categories.map(category => {
+            return (
+              <a href={`#category-${category.id}`} key={category.id}>
+                <Tooltip.Provider delayDuration={0}>
+                  <Tooltip content={category.title} placement="bottom">
+                    <div className={styles.icon}>{category.icon}</div>
+                  </Tooltip>
+                </Tooltip.Provider>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+    </Container>
+  );
+}

src/pages/index.astro

@@ -8,11 +8,13 @@ import Source from '@/components/source.astro';
 import Footer from '@/components/footer.astro';
 
 import { App } from '@/components/app';
+import CategoryIcons from '@/components/categories/category-icons/category-icons';
 ---
 
 <Layout title="Moodist: Ambient Sounds for Focus and Calm">
   <Donate />
   <Hero />
+  <CategoryIcons client:load />
   <App client:load />
   <About />
   <Source />