feat: implement internationalization support by updating locale files and adding language switch component

src/components/layout/footer/Footer.tsx

@@ -10,12 +10,12 @@ import { useTranslations } from 'next-intl';
 import { useParams } from 'next/navigation';
 import { getQuickLinks } from '@/assets/constants/footerMenu/quickLinks.const';
 import { getWhoAreWeLinks } from '@/assets/constants/footerMenu/whoAreWe.const';
-import { TLocales } from '@/locales/translates';
+import { TLocales } from '@/models/layout';
 
 export default function Footer() {
   const t = useTranslations();
   const params = useParams();
-  const locale = params.locale as TLocales;
+  const locale = (params.locale as TLocales) || 'en';
 
   const quickLinks = getQuickLinks(t, locale);
   const whoAreWeLinks = getWhoAreWeLinks(t, locale);

src/components/layout/footer/FooterInfo.tsx

@@ -6,6 +6,7 @@ import { Icon, IconName } from '@/components/uikit/icons';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
+import LanguageSwitch from '../languageSwitch';
 
 export default function FooterInfo({
   withLogo,
@@ -42,6 +43,7 @@ export default function FooterInfo({
           </Link>
         ))}
       </div>
+      <LanguageSwitch />
     </div>
   );
 }

src/components/layout/languageSwitch/index.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export default function LanguageSwitch() {
+  const pathname = usePathname();
+
+  const pathWithoutLocale = pathname.replace(/^\/(en|fa)/, '');
+
+  return (
+    <div className="flex items-center justify-center">
+      <Link
+        href={`/en${pathWithoutLocale === '/' ? '' : pathWithoutLocale}`}
+        className="mx-2 text-gray-800 hover:text-blue-500"
+      >
+        EN
+      </Link>
+      <span className="text-gray-800">|</span>
+      <Link
+        href={`/fa${pathWithoutLocale === '/' ? '' : pathWithoutLocale}`}
+        className="mx-2 text-gray-800 hover:text-blue-500"
+      >
+        FA
+      </Link>
+    </div>
+  );
+}

src/components/layout/map/index.tsx

@@ -3,6 +3,7 @@
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import 'leaflet/dist/leaflet.css';
 
 delete (L.Icon.Default.prototype as any)._getIconUrl;
 L.Icon.Default.mergeOptions({
@@ -30,7 +31,7 @@ const ContactMap = () => {
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         <Marker position={position}>
-          <Popup>lastminute.com London Eye</Popup>
+          <Popup>Pasargad Bricks</Popup>
         </Marker>
       </MapContainer>
     </div>