From bad2d31b2dfa6a1f01c1c9cd767209c2c6f58f5c Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 20 Oct 2023 17:14:28 +0330
Subject: [PATCH] refactor: seperate common types

---
 src/components/app/app.tsx               |  7 +------
 src/components/categories/categories.tsx | 14 +++-----------
 src/components/category/category.tsx     | 13 +++----------
 src/components/sound/sound.tsx           |  8 +++-----
 src/components/sounds/sounds.tsx         |  9 +++------
 src/data/types.d.ts                      | 17 +++++++++++++++++
 6 files changed, 30 insertions(+), 38 deletions(-)
 create mode 100644 src/data/types.d.ts

diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
index 1d03264..132c7b6 100644
--- a/src/components/app/app.tsx
+++ b/src/components/app/app.tsx
@@ -11,12 +11,7 @@ import { Categories } from '@/components/categories';
 
 import { sounds } from '@/data/sounds';
 
-interface Sound {
-  src: string;
-  label: string;
-  id: string;
-  icon: React.ReactNode;
-}
+import type { Sound } from '@/data/types';
 
 export function App() {
   const categories = useMemo(() => sounds.categories, []);
diff --git a/src/components/categories/categories.tsx b/src/components/categories/categories.tsx
index c1b4ce7..b7b7687 100644
--- a/src/components/categories/categories.tsx
+++ b/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<{
-    id: string;
-    title: string;
-    icon: React.ReactNode;
-    sounds: Array<{
-      label: string;
-      src: string;
-      icon: React.ReactNode;
-      id: string;
-    }>;
-  }>;
+  categories: Categories;
 }
 
 export function Categories({ categories }: CategoriesProps) {
diff --git a/src/components/category/category.tsx b/src/components/category/category.tsx
index ee0b0fe..208d9d9 100644
--- a/src/components/category/category.tsx
+++ b/src/components/category/category.tsx
@@ -5,17 +5,10 @@ import { fade } from '@/lib/motion';
 
 import styles from './category.module.css';
 
-interface CategoryProps {
-  icon: React.ReactNode;
-  title: string;
-  id: string;
+import type { Category } from '@/data/types';
+
+interface CategoryProps extends Category {
   functional?: boolean;
-  sounds: Array<{
-    label: string;
-    src: string;
-    icon: React.ReactNode;
-    id: string;
-  }>;
 }
 
 export function Category({
diff --git a/src/components/sound/sound.tsx b/src/components/sound/sound.tsx
index 353f749..0ed0937 100644
--- a/src/components/sound/sound.tsx
+++ b/src/components/sound/sound.tsx
@@ -9,12 +9,10 @@ import { cn } from '@/helpers/styles';
 
 import styles from './sound.module.css';
 
-interface SoundProps {
-  label: string;
-  src: string;
-  icon: React.ReactNode;
+import type { Sound } from '@/data/types';
+
+interface SoundProps extends Sound {
   hidden: boolean;
-  id: string;
   functional: boolean;
   selectHidden: (key: string) => void;
   unselectHidden: (key: string) => void;
diff --git a/src/components/sounds/sounds.tsx b/src/components/sounds/sounds.tsx
index d8c794d..9a77a37 100644
--- a/src/components/sounds/sounds.tsx
+++ b/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<{
-    label: string;
-    src: string;
-    icon: React.ReactNode;
-    id: string;
-  }>;
+  sounds: Sounds;
 }
 
 export function Sounds({ functional, id, sounds }: SoundsProps) {
diff --git a/src/data/types.d.ts b/src/data/types.d.ts
new file mode 100644
index 0000000..4568ea5
--- /dev/null
+++ b/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>;