create modal language selector

src/app/[locale]/page.tsx

@@ -1,4 +1,5 @@
 import Header from '@/components/layout/header';
+import ModalLanguageSelector from '@/components/layout/languageModal';
 import AboutTopInfo from '@/components/pages/about/TopInfo';
 import HomePageBlog from '@/components/pages/home/HomePageBlog';
 import HomeStorySection from '@/components/pages/home/HomeStorySection';
@@ -24,6 +25,7 @@ export default async function Home({ params }: { params: IPageParams }) {
   const t = await getTranslations({ locale });
   return (
     <main className="flex flex-col items-center justify-between">
+      <ModalLanguageSelector />
       <Header />
       <AboutTopInfo />
       <HomePageProducts locale={locale} />

src/components/layout/languageModal/index.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { TLocales } from '@/models/layout';
+import Button, { IconButton } from '@/components/uikit/button';
+import images from '@/assets/images/images';
+import Image from 'next/image';
+import { Icon } from '@/components/uikit/icons';
+
+const languages = [
+  {
+    title: 'EN',
+    image: images.langEn,
+    locale: 'en',
+  },
+  {
+    title: 'FA',
+    image: images.langFa,
+    locale: 'fa',
+  },
+];
+
+export default function ModalLanguageSelector() {
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    const alreadySelected = localStorage.getItem('selectedLocale');
+    if (!alreadySelected) {
+      setShowModal(true);
+    }
+  }, []);
+
+  const handleCancel = () => {
+    setShowModal(false);
+  };
+
+  const changeLocale = (locale: TLocales) => {
+    localStorage.setItem('selectedLocale', locale);
+    const currentPath = window.location.pathname;
+    const newPath = currentPath.replace(/^\/(en|fa)/, '');
+    window.location.pathname = `/${locale}${newPath}`;
+  };
+
+  if (!showModal) return null;
+
+  return (
+    <div className="bg-opacity-60 fixed inset-0 z-50 flex items-center justify-center bg-black">
+      <div className="relative w-80 rounded-2xl bg-white p-6 text-center shadow-xl">
+        <IconButton
+          size="small"
+          onClick={handleCancel}
+          className="absolute end-3 top-0 mb-3"
+        >
+          <Icon name="close" className="h-5 w-5" />
+        </IconButton>
+
+        <h2 className="mb-4 text-lg font-semibold text-gray-800">
+          Select Language
+        </h2>
+        <div className="flex justify-around">
+          {languages.map((lang) => (
+            <Button
+              key={lang.locale}
+              onClick={() => changeLocale(lang.locale as TLocales)}
+              className="rounded-xl bg-blue-500 px-4 py-2 text-white transition hover:bg-blue-700"
+            >
+              <Image src={lang.image} alt={lang.title} />
+            </Button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}