52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react';
|
|
|
|
import { IoCloseCircleOutline } from "react-icons/io5";
|
|
|
|
import style from './LangSwitcher.module.scss'
|
|
|
|
import { useRouter } from "next/navigation";
|
|
|
|
import { LangOption } from '@/meta/settings';
|
|
|
|
interface Props {
|
|
handleClose(): void
|
|
labels: {
|
|
title: string
|
|
langs: LangOption[]
|
|
}
|
|
}
|
|
|
|
const LangSwitcher: React.FC<Props> = (props) => {
|
|
|
|
const { labels, handleClose } = props
|
|
|
|
const router = useRouter();
|
|
|
|
const setOption = (option: LangOption) => {
|
|
router.push(`/${option.code}`);
|
|
};
|
|
|
|
return (
|
|
<dialog open>
|
|
<article className={style.container}>
|
|
<header className={style.header}>
|
|
<div className={style.title}>{labels.title}</div>
|
|
<div className={style.close} onClick={() => { handleClose() }}><IoCloseCircleOutline size={24} /></div>
|
|
</header>
|
|
<p className={style.content}>{labels.langs.map((elem, key) =>
|
|
<span className={style.lang} onMouseDown={(e) => {
|
|
e.preventDefault();
|
|
setOption(elem);
|
|
handleClose();
|
|
}} key={key}>{elem.label}</span>
|
|
)}
|
|
</p>
|
|
</article>
|
|
</dialog >
|
|
|
|
);
|
|
};
|
|
|
|
export default LangSwitcher; |