47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
"use client";
|
|
import Grid from '@mui/material/Grid2';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import Select from '@mui/material/Select';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import i18n from '@package/utils/language/i18n';
|
|
|
|
const Navbar: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const [language, setLanguage] = useState(i18n.language || 'en');
|
|
|
|
const changeLanguage = (lng: string) => {
|
|
i18n.changeLanguage(lng);
|
|
setLanguage(lng);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setLanguage(i18n.language);
|
|
}, []);
|
|
|
|
return (
|
|
<Grid
|
|
container
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
className="bg-blue-600 text-white p-4"
|
|
>
|
|
<Grid>
|
|
<h1 className="text-white font-bold">{t('lbl_wellcome')}</h1>
|
|
</Grid>
|
|
<Grid>
|
|
<Select
|
|
value={language}
|
|
onChange={(e) => changeLanguage(e.target.value as string)}
|
|
variant="outlined"
|
|
className="bg-white text-black"
|
|
>
|
|
<MenuItem value="en">English</MenuItem>
|
|
<MenuItem value="es">Español</MenuItem>
|
|
</Select>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|