From 766e4e309df2d0a4d4048739198c2555954b254c Mon Sep 17 00:00:00 2001
From: "Ali(Ako) Hosseini" <ali.hosseini@deriv.com>
Date: Fri, 17 May 2024 17:43:34 +0800
Subject: [PATCH] feat: use generic types

---
 .../LanguagesSwitcher/DesktopLanguagesModal.tsx          | 9 ++-------
 .../AppLayout/LanguagesSwitcher/LanguageItem.tsx         | 4 ++--
 .../LanguagesSwitcher/MobileLanguagesDrawer.tsx          | 5 +++--
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/AppLayout/LanguagesSwitcher/DesktopLanguagesModal.tsx b/src/components/AppLayout/LanguagesSwitcher/DesktopLanguagesModal.tsx
index eb5fd348..ae0f8521 100644
--- a/src/components/AppLayout/LanguagesSwitcher/DesktopLanguagesModal.tsx
+++ b/src/components/AppLayout/LanguagesSwitcher/DesktopLanguagesModal.tsx
@@ -1,16 +1,11 @@
-import React, { ReactElement } from "react";
+import React, { ComponentProps, ReactElement } from "react";
 import { Modal, Text } from "../../../main";
 import "./LanguagesModal.scss";
-import { IconTypes } from "@deriv/quill-icons";
 import { LanguageItem } from "./LanguageItem";
 
 type TLanguagesModalProps = {
     isModalOpen: boolean;
-    languages: {
-        code: string;
-        displayName: string | ReactElement;
-        icon: IconTypes;
-    }[];
+    languages: ComponentProps<typeof LanguageItem>['language'][]
     onClose: () => void;
     onLanguageSwitch: (code: string) => void;
     currentLang: string;
diff --git a/src/components/AppLayout/LanguagesSwitcher/LanguageItem.tsx b/src/components/AppLayout/LanguagesSwitcher/LanguageItem.tsx
index ff80736d..5ec07058 100644
--- a/src/components/AppLayout/LanguagesSwitcher/LanguageItem.tsx
+++ b/src/components/AppLayout/LanguagesSwitcher/LanguageItem.tsx
@@ -2,12 +2,12 @@ import { ReactElement } from "react";
 import { Button } from "../../Button";
 import { Text } from "../../Text";
 import { IconTypes } from "@deriv/quill-icons";
-export type TLanguageItem = {
+type TLanguageItem = {
     code: string;
     displayName: string | ReactElement;
     icon: IconTypes;
 };
-export type TLangComponent = {
+type TLangComponent = {
     language: TLanguageItem;
     onButtonClick: () => void;
     currentLang: string;
diff --git a/src/components/AppLayout/LanguagesSwitcher/MobileLanguagesDrawer.tsx b/src/components/AppLayout/LanguagesSwitcher/MobileLanguagesDrawer.tsx
index 61e842af..49433e96 100644
--- a/src/components/AppLayout/LanguagesSwitcher/MobileLanguagesDrawer.tsx
+++ b/src/components/AppLayout/LanguagesSwitcher/MobileLanguagesDrawer.tsx
@@ -1,6 +1,7 @@
 import "./LanguagesDrawer.scss";
 import clsx from "clsx";
-import { LanguageItem, TLanguageItem } from "./LanguageItem";
+import { LanguageItem } from "./LanguageItem";
+import { ComponentProps } from "react";
 
 type TLanguageDrawer = {
     onClose: () => void;
@@ -12,7 +13,7 @@ type TLanguageDrawer = {
 
 // Define the props for the component using intersection type
 type TLanguagesItemsDrawerProps = {
-    languages: TLanguageItem[];
+    languages: ComponentProps<typeof LanguageItem>['language'][];
 } & TLanguageDrawer;
 
 export const MobileLanguagesDrawer = ({