feat: use generic types

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;

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;

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 = ({