change design language modal

messages/en.d.json.ts

@@ -102,6 +102,9 @@ declare const messages: {
   "com_contact_textarea_error": "Message must be at least 10 characters long.",
   "com_contact_button_submit": "Submit Message",
   "pages_notFound_title": "404 Not Found Page",
+
+  "com_modal_language_title": "Please select language",
+  "com_modal_language_close": "Close",
   "pages_notFound_description": "You can either head back to the Homepage or try a search.",
   "pages_notFound_button": "Go To Home",
 

messages/en.json

@@ -99,6 +99,9 @@
   "com_contact_textarea_error": "Message must be at least 10 characters long.",
   "com_contact_button_submit": "Submit Message",
   "pages_notFound_title": "404 Not Found Page",
+
+  "com_modal_language_title": "Please select language",
+  "com_modal_language_close": "Close",
   "pages_notFound_description": "You can either head back to the Homepage or try a search.",
   "pages_notFound_button": "Go To Home",
 

messages/fa.json

@@ -98,6 +98,9 @@
   "com_contact_phone_error": "شماره تماس معتبر نیست (مثلاً: 09123456789)",
   "com_contact_textarea_error": "پیام باید حداقل ۱۰ کاراکتر باشد",
   "com_contact_button_submit": "ارسال پیام",
+
+  "com_modal_language_title": "لطفاً زبان را انتخاب کنید",
+  "com_modal_language_close": "بستن",
   "pages_notFound_title": "صفحه مورد نظر پیدا نشد.",
   "pages_notFound_description": "صفحه‌ای که به دنبال آن هستید وجود ندارد یا منتقل شده است. لطفاً آدرس را بررسی کنید یا به صفحه اصلی بازگردید.",
   "pages_notFound_button": "بازگشت به صفحه اصلی",

src/assets/images/images.ts

@@ -13,6 +13,8 @@ import product1 from './product1.png';
 import notFound from './404.png';
 import langEn from './lang_en.png';
 import langFa from './lang_fa.png';
+import en from './en_square.png';
+import fa from './ir_square.png';
 export default {
   homeBanner,
   logo,
@@ -27,6 +29,7 @@ export default {
   homeProductBack,
   whatWeDoImage,
   product1,
+  fa,en,
   langEn,
   langFa,
 };

src/components/layout/languageModal/index.tsx

@@ -2,70 +2,58 @@
 
 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';
+import { useTranslations } from 'next-intl';
 
 const languages = [
   {
     title: 'EN',
-    image: images.langEn,
+    image: images.en,
     locale: 'en',
   },
   {
     title: 'FA',
-    image: images.langFa,
+    image: images.fa,
     locale: 'fa',
   },
 ];
 
 export default function ModalLanguageSelector() {
-  const [showModal, setShowModal] = useState(false);
+  const [show, setShow] = useState(false);
-
+  const t = useTranslations();
   useEffect(() => {
-    const alreadySelected = localStorage.getItem('selectedLocale');
+    const selected = localStorage.getItem('selectedLocale');
-    if (!alreadySelected) {
+    if (!selected) setShow(true);
-      setShowModal(true);
-    }
   }, []);
 
-  const handleCancel = () => {
-    setShowModal(false);
-  };
-
   const changeLocale = (locale: TLocales) => {
     localStorage.setItem('selectedLocale', locale);
-    const currentPath = window.location.pathname;
+    const path = window.location.pathname.replace(/^\/(en|fa)/, '');
-    const newPath = currentPath.replace(/^\/(en|fa)/, '');
+    window.location.pathname = `/${locale}${path}`;
-    window.location.pathname = `/${locale}${newPath}`;
   };
+  const closeModal = () => setShow(false);
 
-  if (!showModal) return null;
+  if (!show) return null;
 
   return (
-    <div className="bg-opacity-60 fixed inset-0 z-50 flex items-center justify-center bg-black">
+    <div
-      <div className="relative w-80 rounded-2xl bg-white p-6 text-center shadow-xl">
+      className="fixed inset-0 z-100 flex items-center justify-center bg-black/50 backdrop-blur-sm"
-        <IconButton
+      onClick={closeModal}
-          size="small"
+    >
-          onClick={handleCancel}
+      <div className="relative h-auto w-100 rounded-3xl bg-white p-6 shadow-2xl">
-          className="absolute end-3 top-0 mb-3"
+        <div className="flex justify-around gap-4">
-        >
-          <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
+            <div
               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"
+              className="flex w-32 flex-col items-center justify-between gap-2 rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-sm font-medium text-gray-700 shadow-sm transition-all hover:border-blue-400 hover:bg-blue-100"
             >
-              <Image src={lang.image} alt={lang.title} />
+              <span className="text-2xl">
-            </Button>
+                <Image src={lang.image} alt={lang.title} className="w-100" />
+              </span>
+              {lang.title}
+            </div>
           ))}
         </div>
       </div>