117 lines
3.4 KiB
TypeScript
117 lines
3.4 KiB
TypeScript
"use client";
|
|
import LanguageIcon from '@mui/icons-material/Language';
|
|
import MoreVertIcon from "@mui/icons-material/MoreVert"; // Botón de 3 puntos verticales
|
|
import { Typography } from '@mui/material';
|
|
import Grid from '@mui/material/Grid2';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import { useAtom } from 'jotai';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import UserAtom from '@atoms/states/UserAtom';
|
|
import i18n from '@package/utils/language/i18n';
|
|
|
|
const Navbar: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const [language, setLanguage] = useState(i18n.language || 'en');
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
const [user] = useAtom(UserAtom);
|
|
const [currentDateTime, setCurrentDateTime] = useState<Date | null>(null);
|
|
|
|
const changeLanguage = (lng: string) => {
|
|
i18n.changeLanguage(lng);
|
|
setLanguage(lng);
|
|
handleClose();
|
|
};
|
|
|
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setLanguage(i18n.language);
|
|
const interval = setInterval(() => {
|
|
setCurrentDateTime(new Date());
|
|
}, 60000);
|
|
|
|
setCurrentDateTime(new Date());
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const formattedDate = currentDateTime
|
|
? currentDateTime.toLocaleDateString(undefined, {
|
|
weekday: "short",
|
|
day: "numeric",
|
|
month: "short",
|
|
})
|
|
: '';
|
|
const formattedTime = currentDateTime
|
|
? currentDateTime.toLocaleTimeString(undefined, {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})
|
|
: '';
|
|
|
|
return (
|
|
<Grid
|
|
container
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
className="bg-blue-600 text-white p-4"
|
|
>
|
|
<Grid>
|
|
<h1 className="text-white font-bold">
|
|
{user ? `${t('lbl_wellcome')} ${user.name} ${user.lastName}` : t('lbl_wellcome')}
|
|
</h1>
|
|
</Grid>
|
|
|
|
<Grid>
|
|
<Typography variant="body2" color="text.secondary" className="text-white">
|
|
{formattedDate} - {formattedTime}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary" className="text-white">
|
|
{t("lbl_Store")}: <strong>8004</strong> | {t("lbl_register")}: <strong>317</strong>
|
|
</Typography>
|
|
</Grid>
|
|
|
|
<Grid container alignItems="center">
|
|
<IconButton
|
|
aria-controls="language-menu"
|
|
aria-haspopup="true"
|
|
onClick={handleClick}
|
|
className="text-white"
|
|
>
|
|
<LanguageIcon />
|
|
</IconButton>
|
|
<Menu
|
|
id="language-menu"
|
|
anchorEl={anchorEl}
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleClose}
|
|
>
|
|
<MenuItem onClick={() => changeLanguage('en')}>English</MenuItem>
|
|
<MenuItem onClick={() => changeLanguage('es')}>Español</MenuItem>
|
|
</Menu>
|
|
|
|
{/* Botón de 3 puntos verticales */}
|
|
<IconButton
|
|
size="small"
|
|
className="text-white ml-4"
|
|
onClick={() => {
|
|
console.log('Menú de opciones abierto');
|
|
}}
|
|
>
|
|
<MoreVertIcon />
|
|
</IconButton>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|