refactor: seperate common types

src/components/app/app.tsx

@@ -11,12 +11,7 @@ import { Categories } from '@/components/categories';
 
 import { sounds } from '@/data/sounds';
 
-interface Sound {
+import type { Sound } from '@/data/types';
-  src: string;
-  label: string;
-  id: string;
-  icon: React.ReactNode;
-}
 
 export function App() {
   const categories = useMemo(() => sounds.categories, []);

src/components/categories/categories.tsx

@@ -2,18 +2,10 @@ import { AnimatePresence } from 'framer-motion';
 
 import { Category } from '@/components/category';
 
+import type { Categories } from '@/data/types';
+
 interface CategoriesProps {
-  categories: Array<{
+  categories: Categories;
-    id: string;
-    title: string;
-    icon: React.ReactNode;
-    sounds: Array<{
-      label: string;
-      src: string;
-      icon: React.ReactNode;
-      id: string;
-    }>;
-  }>;
 }
 
 export function Categories({ categories }: CategoriesProps) {

src/components/category/category.tsx

@@ -5,17 +5,10 @@ import { fade } from '@/lib/motion';
 
 import styles from './category.module.css';
 
-interface CategoryProps {
+import type { Category } from '@/data/types';
-  icon: React.ReactNode;
+
-  title: string;
+interface CategoryProps extends Category {
-  id: string;
   functional?: boolean;
-  sounds: Array<{
-    label: string;
-    src: string;
-    icon: React.ReactNode;
-    id: string;
-  }>;
 }
 
 export function Category({

src/components/sound/sound.tsx

@@ -9,12 +9,10 @@ import { cn } from '@/helpers/styles';
 
 import styles from './sound.module.css';
 
-interface SoundProps {
+import type { Sound } from '@/data/types';
-  label: string;
+
-  src: string;
+interface SoundProps extends Sound {
-  icon: React.ReactNode;
   hidden: boolean;
-  id: string;
   functional: boolean;
   selectHidden: (key: string) => void;
   unselectHidden: (key: string) => void;

src/components/sounds/sounds.tsx

@@ -8,15 +8,12 @@ import { fade, scale, mix } from '@/lib/motion';
 
 import styles from './sounds.module.css';
 
+import type { Sounds } from '@/data/types';
+
 interface SoundsProps {
   id: string;
   functional: boolean;
-  sounds: Array<{
+  sounds: Sounds;
-    label: string;
-    src: string;
-    icon: React.ReactNode;
-    id: string;
-  }>;
 }
 
 export function Sounds({ functional, id, sounds }: SoundsProps) {

src/data/types.d.ts

@@ -0,0 +1,17 @@
+export interface Sound {
+  label: string;
+  src: string;
+  icon: React.ReactNode;
+  id: string;
+}
+
+export type Sounds = Array<Sound>;
+
+export interface Category {
+  id: string;
+  title: string;
+  icon: React.ReactNode;
+  sounds: Sounds;
+}
+
+export type Categories = Array<Category>;