change design language modal

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');
-    if (!alreadySelected) {
-      setShowModal(true);
-    }
+    const selected = localStorage.getItem('selectedLocale');
+    if (!selected) setShow(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}`;
+    const path = window.location.pathname.replace(/^\/(en|fa)/, '');
+    window.location.pathname = `/${locale}${path}`;
   };
+  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 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">
+    <div
+      className="fixed inset-0 z-100 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={closeModal}
+    >
+      <div className="relative h-auto w-100 rounded-3xl bg-white p-6 shadow-2xl">
+        <div className="flex justify-around gap-4">
           {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} />
-            </Button>
+              <span className="text-2xl">
+                <Image src={lang.image} alt={lang.title} className="w-100" />
+              </span>
+              {lang.title}
+            </div>
           ))}
         </div>
       </div>