75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
|
'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>
|
||
|
|
);
|
||
|
|
}
|