145 lines
4.0 KiB
TypeScript
145 lines
4.0 KiB
TypeScript
import { Box, Button, Typography } from '@mui/material';
|
||
import CloseIcon from '@mui/icons-material/Close';
|
||
import MinimizeIcon from '@mui/icons-material/Minimize';
|
||
import { useLocation, useNavigate } from 'react-router-dom';
|
||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||
|
||
declare global {
|
||
interface Window {
|
||
electron: {
|
||
ipcRenderer: {
|
||
invoke(channel: string, ...args: unknown[]): Promise<any>;
|
||
on(channel: string, func: (...args: unknown[]) => void): void;
|
||
removeAllListeners(channel: string): void;
|
||
};
|
||
};
|
||
}
|
||
}
|
||
|
||
// Определяем пропсы
|
||
interface TopBarProps {
|
||
onRegister?: () => void; // Опционально, если нужен обработчик регистрации
|
||
}
|
||
|
||
export default function TopBar({ onRegister }: TopBarProps) {
|
||
// Получаем текущий путь
|
||
const location = useLocation();
|
||
const isLoginPage = location.pathname === '/login';
|
||
const isLaunchPage = location.pathname.startsWith('/launch');
|
||
const navigate = useNavigate();
|
||
|
||
const handleLaunchPage = () => {
|
||
navigate('/');
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: '50px',
|
||
zIndex: 1000,
|
||
width: '100%',
|
||
WebkitAppRegion: 'drag',
|
||
overflow: 'hidden',
|
||
justifyContent: 'space-between', // Всё содержимое справа
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
WebkitAppRegion: 'no-drag',
|
||
gap: '2vw',
|
||
padding: '1em',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
{isLaunchPage && (
|
||
<Button
|
||
variant="outlined"
|
||
color="primary"
|
||
onClick={() => handleLaunchPage()}
|
||
sx={{
|
||
width: '3em',
|
||
height: '3em',
|
||
borderRadius: '50%',
|
||
border: 'unset',
|
||
color: 'white',
|
||
minWidth: 'unset',
|
||
minHeight: 'unset',
|
||
}}
|
||
>
|
||
<ArrowBackIcon />
|
||
</Button>
|
||
)}
|
||
</Box>
|
||
{/* Правая часть со всеми кнопками */}
|
||
<Box
|
||
sx={{
|
||
display: 'flex',
|
||
WebkitAppRegion: 'no-drag',
|
||
gap: '2vw',
|
||
padding: '1em',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
{/* Кнопка регистрации, если на странице логина */}
|
||
{isLoginPage && (
|
||
<Button
|
||
variant="outlined"
|
||
color="primary"
|
||
onClick={() => onRegister && onRegister()}
|
||
sx={{
|
||
width: '10em',
|
||
height: '3em',
|
||
borderRadius: '1.5vw',
|
||
color: 'white',
|
||
backgroundImage: 'linear-gradient(to right, #7BB8FF, #FFB7ED)',
|
||
border: 'unset',
|
||
'&:hover': {
|
||
backgroundImage: 'linear-gradient(to right, #6AA8EE, #EEA7DD)',
|
||
},
|
||
boxShadow: '0.5em 0.5em 0.5em 0px #00000040 inset',
|
||
}}
|
||
>
|
||
Регистрация
|
||
</Button>
|
||
)}
|
||
|
||
{/* Кнопки управления окном */}
|
||
<Button
|
||
onClick={() => {
|
||
window.electron.ipcRenderer.invoke('minimize-app');
|
||
}}
|
||
sx={{
|
||
minWidth: 'unset',
|
||
minHeight: 'unset',
|
||
width: '3em',
|
||
height: '3em',
|
||
borderRadius: '50%',
|
||
}}
|
||
>
|
||
<MinimizeIcon sx={{ color: 'white' }} />
|
||
</Button>
|
||
<Button
|
||
onClick={() => {
|
||
window.electron.ipcRenderer.invoke('close-app');
|
||
}}
|
||
sx={{
|
||
minWidth: 'unset',
|
||
minHeight: 'unset',
|
||
width: '3em',
|
||
height: '3em',
|
||
borderRadius: '50%',
|
||
}}
|
||
>
|
||
<CloseIcon sx={{ color: 'white' }} />
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|