refactor: change data file structure

src/components/categories/categories.tsx

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

src/data/sounds.json

@@ -1,58 +0,0 @@
-{
-  "sounds": {
-    "nature": {
-      "title": "Nature",
-      "sounds": [
-        {
-          "label": "Rain",
-          "src": "/sounds/rain.mp3"
-        },
-        {
-          "label": "Birds",
-          "src": "/sounds/birds.mp3"
-        },
-        {
-          "label": "River",
-          "src": "/sounds/river.mp3"
-        },
-        {
-          "label": "Thunder",
-          "src": "/sounds/thunder.mp3"
-        },
-        {
-          "label": "Crickets",
-          "src": "/sounds/crickets.mp3"
-        },
-        {
-          "label": "Waves",
-          "src": "/sounds/waves.mp3"
-        },
-        {
-          "label": "Seagulls",
-          "src": "/sounds/seagulls.mp3"
-        },
-        {
-          "label": "Campfire",
-          "src": "/sounds/campfire.mp3"
-        }
-      ]
-    },
-    "urban": {
-      "title": "Urban",
-      "sounds": [
-        {
-          "label": "Airport",
-          "src": "/sounds/airport.mp3"
-        },
-        {
-          "label": "Cafe",
-          "src": "/sounds/cafe.mp3"
-        },
-        {
-          "label": "Rain on Window",
-          "src": "/sounds/rain-on-window.mp3"
-        }
-      ]
-    }
-  }
-}

src/data/sounds.ts

@@ -0,0 +1,66 @@
+export const sounds: {
+  categories: Array<{
+    id: string;
+    title: string;
+    sounds: Array<{ label: string; src: string }>;
+  }>;
+} = {
+  categories: [
+    {
+      id: 'nature',
+      sounds: [
+        {
+          label: 'Rain',
+          src: '/sounds/rain.mp3',
+        },
+        {
+          label: 'Birds',
+          src: '/sounds/birds.mp3',
+        },
+        {
+          label: 'River',
+          src: '/sounds/river.mp3',
+        },
+        {
+          label: 'Thunder',
+          src: '/sounds/thunder.mp3',
+        },
+        {
+          label: 'Crickets',
+          src: '/sounds/crickets.mp3',
+        },
+        {
+          label: 'Waves',
+          src: '/sounds/waves.mp3',
+        },
+        {
+          label: 'Seagulls',
+          src: '/sounds/seagulls.mp3',
+        },
+        {
+          label: 'Campfire',
+          src: '/sounds/campfire.mp3',
+        },
+      ],
+      title: 'Nature',
+    },
+    {
+      id: 'urban',
+      sounds: [
+        {
+          label: 'Airport',
+          src: '/sounds/airport.mp3',
+        },
+        {
+          label: 'Cafe',
+          src: '/sounds/cafe.mp3',
+        },
+        {
+          label: 'Rain on Window',
+          src: '/sounds/rain-on-window.mp3',
+        },
+      ],
+      title: 'Urban',
+    },
+  ],
+};

src/pages/index.astro

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