feat: add basic categories

.lintstagedrc.json

@@ -1,6 +1,5 @@
 {
-  "*.{ts,tsx}": ["eslint --fix", "tsc-files --noEmit"],
-  "*.{js,jsx}": "eslint --fix",
+  "*.{ts,tsx,js,jsx}": "eslint --fix",
   "*.{json,md}": "prettier --write",
   "*.css": "stylelint --fix",
   "*.astro": ["eslint --fix", "stylelint --fix"],

package.json

@@ -26,7 +26,8 @@
     "@types/react-dom": "^18.2.10",
     "astro": "^3.2.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "4.11.0"
   },
   "devDependencies": {
     "@commitlint/cli": "17.7.2",
@@ -60,7 +61,6 @@
     "stylelint-config-html": "1.1.0",
     "stylelint-config-idiomatic-order": "9.0.0",
     "stylelint-config-standard": "34.0.0",
-    "stylelint-prettier": "4.0.2",
-    "tsc-files": "1.1.4"
+    "stylelint-prettier": "4.0.2"
   }
 }

src/components/categories/categories.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import { BiSolidTree } from 'react-icons/bi';
+import { FaCity } from 'react-icons/fa';
+
+import { Container } from '@/components/container';
+import { Category } from '@/components/category';
+
+interface CategoriesProps {
+  sounds: {
+    [id: string]: {
+      title: string;
+      sounds: Array<{
+        label: string;
+        src: string;
+      }>;
+    };
+  };
+}
+
+export function Categories({ sounds }: CategoriesProps) {
+  const categories = useMemo(() => {
+    const idToColor: { [id: string]: string } = {
+      nature: 'green',
+      urban: 'indigo',
+    };
+
+    const idToIcon: { [id: string]: React.ReactNode } = {
+      nature: <BiSolidTree />,
+      urban: <FaCity />,
+    };
+
+    const ids = Object.keys(sounds);
+    const categories: Array<{
+      color: string;
+      icon: React.ReactNode;
+      title: string;
+      id: string;
+      sounds: Array<{ label: string; src: string }>;
+    }> = [];
+
+    ids.forEach(id => {
+      const category = sounds[id];
+
+      categories.push({
+        color: idToColor[id] || 'green',
+        icon: idToIcon[id] || '-',
+        id: id,
+        ...category,
+      });
+    });
+
+    return categories;
+  }, [sounds]);
+
+  return (
+    <Container>
+      <div>
+        {categories.map(category => (
+          <Category {...category} key={category.id} />
+        ))}
+      </div>
+    </Container>
+  );
+}

src/components/categories/index.ts

@@ -0,0 +1 @@
+export { Categories } from './categories';

src/components/category/category.module.css

@@ -0,0 +1,50 @@
+.category {
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+
+      &.green {
+        background: linear-gradient(transparent, #16a34a);
+      }
+
+      &.indigo {
+        background: linear-gradient(transparent, #4f46e5);
+      }
+    }
+
+    & .icon {
+      display: flex;
+      width: 45px;
+      height: 45px;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+      font-size: var(--font-md);
+
+      &.green {
+        border-color: #16a34a;
+        background-color: rgb(22 163 74 / 20%);
+      }
+
+      &.indigo {
+        border-color: #4f46e5;
+        background-color: rgb(79 70 229 / 20%);
+      }
+    }
+  }
+
+  & .title {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+}

src/components/category/category.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+import { cn } from '@/helpers/styles';
+
+import styles from './category.module.css';
+
+interface CategoryProps {
+  color: string;
+  icon: React.ReactNode;
+  title: string;
+  id: string;
+  sounds: Array<{ label: string; src: string }>;
+}
+
+export function Category({ color, icon, title }: CategoryProps) {
+  const colorStyle = useMemo(() => {
+    const colorToStyle: { [color: string]: string } = {
+      green: styles.green,
+      indigo: styles.indigo,
+    };
+
+    return colorToStyle[color];
+  }, [color]);
+
+  return (
+    <div className={styles.category}>
+      <div className={styles.iconContainer}>
+        <div className={cn(styles.tail, colorStyle)} />
+        <div className={cn(styles.icon, colorStyle)}>{icon}</div>
+      </div>
+
+      <h2 className={styles.title}>{title}</h2>
+    </div>
+  );
+}

src/components/category/index.ts

@@ -0,0 +1 @@
+export { Category } from './category';

src/components/hero/hero.module.css

@@ -1,5 +1,5 @@
 .hero {
-  padding: 100px 0;
+  padding: 100px 0 10px;
   text-align: center;
 
   & .logo {

src/data/sounds.json

@@ -1,7 +1,7 @@
 {
   "sounds": {
     "nature": {
-      "label": "Nature",
+      "title": "Nature",
       "sounds": [
         {
           "label": "Rain",
@@ -38,7 +38,7 @@
       ]
     },
     "urban": {
-      "label": "Urban",
+      "title": "Urban",
       "sounds": [
         {
           "label": "Airport",

src/helpers/styles.ts

@@ -0,0 +1,7 @@
+type className = undefined | null | false | string;
+
+export function cn(...classNames: Array<className>): string {
+  const className = classNames.filter(className => !!className).join(' ');
+
+  return className;
+}

src/pages/index.astro

@@ -3,9 +3,13 @@ import Layout from '@/layouts/layout.astro';
 
 import { Gradient } from '@/components/gradient';
 import { Hero } from '@/components/hero';
+import { Categories } from '@/components/categories';
+
+import sounds from '@/data/sounds.json';
 ---
 
 <Layout title="Welcome to Astro.">
   <Gradient />
   <Hero />
+  <Categories client:load sounds={sounds.sounds} />
 </Layout>