refactor: seperate favorite button

src/components/sound/like/index.ts

@@ -0,0 +1 @@
+export { Like } from './like';

src/components/sound/like/like.module.css

@@ -0,0 +1,21 @@
+.favoriteButton {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 50%;
+  background-color: black;
+  background-color: var(--color-neutral-100);
+  color: var(--color-foreground-subtle);
+  cursor: pointer;
+  outline: none;
+
+  &.isFavorite {
+    color: #f43f5e;
+  }
+}

src/components/sound/like/like.tsx

@@ -0,0 +1,28 @@
+import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
+
+import { useFavoriteStore } from '@/store/favorite';
+import { cn } from '@/helpers/styles';
+
+import styles from './like.module.css';
+
+interface LikeProps {
+  id: string;
+}
+
+export function Like({ id }: LikeProps) {
+  const isFavorite = useFavoriteStore(state => state.favorites.includes(id));
+  const toggleFavorite = useFavoriteStore(state => state.toggleFavorite);
+
+  return (
+    <button
+      aria-label="Add Sound to Favorites"
+      className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
+      onClick={e => {
+        e.stopPropagation();
+        toggleFavorite(id);
+      }}
+    >
+      {isFavorite ? <BiSolidHeart /> : <BiHeart />}
+    </button>
+  );
+}

src/components/sound/sound.module.css

@@ -29,28 +29,6 @@
     content: '';
   }
 
-  & .favoriteButton {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: flex;
-    width: 30px;
-    height: 30px;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--color-neutral-200);
-    border-radius: 50%;
-    background-color: black;
-    background-color: var(--color-neutral-100);
-    color: var(--color-foreground-subtle);
-    cursor: pointer;
-    outline: none;
-
-    &.isFavorite {
-      color: #f43f5e;
-    }
-  }
-
   & .icon {
     position: relative;
     z-index: 2;

src/components/sound/sound.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useEffect } from 'react';
-import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
 
 import { Range } from './range';
+import { Like } from './like';
 
 import { useSound } from '@/hooks/use-sound';
 import { useSoundStore } from '@/store';
-import { useFavoriteStore } from '@/store/favorite';
 import { usePlay } from '@/contexts/play';
 import { cn } from '@/helpers/styles';
 
@@ -40,9 +39,6 @@ export function Sound({
   const volume = useSoundStore(state => state.sounds[id].volume);
   const isSelected = useSoundStore(state => state.sounds[id].isSelected);
 
-  const isFavorite = useFavoriteStore(state => state.favorites.includes(id));
-  const toggleFavorite = useFavoriteStore(state => state.toggleFavorite);
-
   const sound = useSound(src, { loop: true, volume });
 
   useEffect(() => {
@@ -84,15 +80,7 @@ export function Sound({
       onClick={toggle}
       onKeyDown={toggle}
     >
-      <button
+      <Like id={id} />
-        className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
-        onClick={e => {
-          e.stopPropagation();
-          toggleFavorite(id);
-        }}
-      >
-        {isFavorite ? <BiSolidHeart /> : <BiHeart />}
-      </button>
       <div className={styles.icon}>{icon}</div>
       <h3 id={label}>{label}</h3>
       <Range id={id} label={label} />