feat: add icon for sounds

src/components/categories/categories.tsx

@@ -1,27 +1,12 @@
-import { BiSolidTree } from 'react-icons/bi/index';
-import { FaCity } from 'react-icons/fa/index';
-
 import { Container } from '@/components/container';
 import { Category } from '@/components/category';
 import { PlayButton } from '@/components/play-button';
 import { PlayProvider } from '@/contexts/play';
 
-interface CategoriesProps {
-  categories: Array<{
-    id: string;
-    title: string;
-    sounds: Array<{
-      label: string;
-      src: string;
-    }>;
-  }>;
-}
+import { sounds } from '@/data/sounds';
 
-export function Categories({ categories }: CategoriesProps) {
-  const idToIcon: { [id: string]: React.ReactNode } = {
-    nature: <BiSolidTree />,
-    urban: <FaCity />,
-  };
+export function Categories() {
+  const { categories } = sounds;
 
   return (
     <PlayProvider>
@@ -30,11 +15,7 @@ export function Categories({ categories }: CategoriesProps) {
 
         <div>
           {categories.map(category => (
-            <Category
-              {...category}
-              icon={idToIcon[category.id] || idToIcon.nature}
-              key={category.id}
-            />
+            <Category {...category} key={category.id} />
           ))}
         </div>
       </Container>

src/components/category/category.tsx

@@ -6,7 +6,7 @@ interface CategoryProps {
   icon: React.ReactNode;
   title: string;
   id: string;
-  sounds: Array<{ label: string; src: string }>;
+  sounds: Array<{ label: string; src: string; icon: React.ReactNode }>;
 }
 
 export function Category({ icon, sounds, title }: CategoryProps) {

src/components/sound/sound.module.css

@@ -4,7 +4,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 30px 20px;
+  padding: 20px;
   border: 1px solid var(--color-neutral-200);
   border-radius: 8px;
   background: linear-gradient(var(--color-neutral-100), transparent);
@@ -30,7 +30,46 @@
     box-shadow: 0 10px 20px #818cf833;
   }
 
+  & .icon {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-base);
+
+    &::after {
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: var(--color-neutral-50);
+      content: '';
+    }
+
+    &::before {
+      position: absolute;
+      z-index: -2;
+      top: -1px;
+      left: -1px;
+      width: calc(100% + 2px);
+      height: calc(100% + 2px);
+      border-radius: 50%;
+      background: linear-gradient(
+        var(--color-neutral-300),
+        var(--color-neutral-100)
+      );
+      content: '';
+    }
+  }
+
   & h3 {
+    margin-top: 12px;
     cursor: default;
     font-family: var(--font-heading);
     font-size: var(--font-sm);
@@ -41,7 +80,7 @@
   & input {
     width: 100%;
     max-width: 120px;
-    margin-top: 12px;
+    margin-top: 6px;
 
     /********** Range Input Styles **********/
 

src/components/sound/sound.tsx

@@ -10,9 +10,10 @@ import styles from './sound.module.css';
 interface SoundProps {
   label: string;
   src: string;
+  icon: React.ReactNode;
 }
 
-export function Sound({ label, src }: SoundProps) {
+export function Sound({ icon, label, src }: SoundProps) {
   const { isPlaying, play } = usePlay();
   const [isSelected, setIsSelected] = useLocalStorage(
     `${label}-is-selected`,
@@ -52,6 +53,8 @@ export function Sound({ label, src }: SoundProps) {
       onClick={toggle}
       onKeyDown={toggle}
     >
+      <div className={styles.icon}>{icon}</div>
+
       <h3 id={label}>{label}</h3>
       <input
         aria-labelledby={label}

src/components/sounds/sounds.tsx

@@ -3,7 +3,7 @@ import { Sound } from '@/components/sound';
 import styles from './sounds.module.css';
 
 interface SoundsProps {
-  sounds: Array<{ label: string; src: string }>;
+  sounds: Array<{ label: string; src: string; icon: React.ReactNode }>;
 }
 
 export function Sounds({ sounds }: SoundsProps) {

src/data/sounds.tsx

@@ -1,43 +1,62 @@
+import { BiSolidTree, BiWater } from 'react-icons/bi/index';
+import { FaCity, FaCloudShowersHeavy, FaWater } from 'react-icons/fa/index';
+import { PiBirdFill } from 'react-icons/pi/index';
+import { MdOutlineThunderstorm } from 'react-icons/md/index';
+import { GiCricket } from 'react-icons/gi/index';
+import { BsSoundwave } from 'react-icons/bs/index';
+
+const defaultIcon = <BsSoundwave />;
+
 export const sounds: {
   categories: Array<{
     id: string;
     title: string;
-    sounds: Array<{ label: string; src: string }>;
+    icon: React.ReactNode;
+    sounds: Array<{ label: string; src: string; icon: React.ReactNode }>;
   }>;
 } = {
   categories: [
     {
+      icon: <BiSolidTree />,
       id: 'nature',
       sounds: [
         {
+          icon: <FaCloudShowersHeavy />,
           label: 'Rain',
           src: '/sounds/rain.mp3',
         },
         {
+          icon: <PiBirdFill />,
           label: 'Birds',
           src: '/sounds/birds.mp3',
         },
         {
+          icon: <BiWater />,
           label: 'River',
           src: '/sounds/river.mp3',
         },
         {
+          icon: <MdOutlineThunderstorm />,
           label: 'Thunder',
           src: '/sounds/thunder.mp3',
         },
         {
+          icon: <GiCricket />,
           label: 'Crickets',
           src: '/sounds/crickets.mp3',
         },
         {
+          icon: <FaWater />,
           label: 'Waves',
           src: '/sounds/waves.mp3',
         },
         {
+          icon: defaultIcon,
           label: 'Seagulls',
           src: '/sounds/seagulls.mp3',
         },
         {
+          icon: defaultIcon,
           label: 'Campfire',
           src: '/sounds/campfire.mp3',
         },
@@ -45,17 +64,21 @@ export const sounds: {
       title: 'Nature',
     },
     {
+      icon: <FaCity />,
       id: 'urban',
       sounds: [
         {
+          icon: defaultIcon,
           label: 'Airport',
           src: '/sounds/airport.mp3',
         },
         {
+          icon: defaultIcon,
           label: 'Cafe',
           src: '/sounds/cafe.mp3',
         },
         {
+          icon: defaultIcon,
           label: 'Rain on Window',
           src: '/sounds/rain-on-window.mp3',
         },