284 lines
9.9 KiB
TypeScript
284 lines
9.9 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import Tabs from '@mui/material/Tabs';
|
|
import Tab from '@mui/material/Tab';
|
|
import Box from '@mui/material/Box';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { Paper, Button, useTheme, Modal, Typography, Stack, Divider } from "@mui/material";
|
|
import { AutoAwesome, VpnKey, Usb, CloudQueue, Description, Favorite, SlowMotionVideo, PlayArrow, ArrowForwardIos, Star } from "@mui/icons-material";
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface MainMenuProps {
|
|
value: string;
|
|
handleChangeContent: (newValue: string) => void;
|
|
}
|
|
|
|
export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProps) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const [sponsorModalOpen, setSponsorModalOpen] = useState(false);
|
|
const [docModalOpen, setDocModalOpen] = useState(false);
|
|
const [starCount, setStarCount] = useState<number | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchStarCount = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const response = await fetch('https://api.github.com/repos/getmaxun/maxun', {
|
|
headers: {
|
|
'Accept': 'application/vnd.github.v3+json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setStarCount(data.stargazers_count);
|
|
} else {
|
|
console.error('Failed to fetch GitHub star count');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching GitHub star count:', error);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchStarCount();
|
|
|
|
// Optional: Refresh star count every 5 minutes
|
|
const intervalId = setInterval(fetchStarCount, 5 * 60 * 1000);
|
|
|
|
return () => clearInterval(intervalId);
|
|
}, []);
|
|
|
|
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
|
|
navigate(`/${newValue}`);
|
|
handleChangeContent(newValue);
|
|
};
|
|
|
|
const handleRobotsClick = () => {
|
|
if (location.pathname !== '/robots') {
|
|
navigate('/robots');
|
|
handleChangeContent('robots');
|
|
}
|
|
};
|
|
|
|
const defaultcolor = theme.palette.mode === 'light' ? 'black' : 'white';
|
|
|
|
const buttonStyles = {
|
|
justifyContent: 'flex-start',
|
|
textAlign: 'left',
|
|
fontSize: '15px',
|
|
letterSpacing: '0.02857em',
|
|
padding: '20px 20px 20px 22px',
|
|
minHeight: '48px',
|
|
minWidth: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
textTransform: 'none',
|
|
color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit',
|
|
'&:hover': {
|
|
color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit',
|
|
backgroundColor: theme.palette.mode === 'light' ? '#f5f5f5' : 'inherit',
|
|
},
|
|
};
|
|
|
|
const starButtonStyles = {
|
|
justifyContent: 'flex-start',
|
|
textAlign: 'left',
|
|
fontSize: '15px',
|
|
padding: '12px 20px 12px 22px',
|
|
minHeight: '48px',
|
|
minWidth: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
textTransform: 'none',
|
|
color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit',
|
|
backgroundColor: theme.palette.mode === 'light' ? '#fafafa' : 'rgba(255, 255, 255, 0.04)',
|
|
'&:hover': {
|
|
color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit',
|
|
backgroundColor: theme.palette.mode === 'light' ? '#f0f0f0' : 'rgba(255, 255, 255, 0.08)',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Paper
|
|
sx={{
|
|
height: '100%',
|
|
width: '230px',
|
|
backgroundColor: theme.palette.background.paper,
|
|
color: defaultcolor,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}}
|
|
variant="outlined"
|
|
square
|
|
>
|
|
<Box sx={{
|
|
width: '100%',
|
|
paddingBottom: '1rem',
|
|
flexGrow: 1,
|
|
overflowY: 'auto'
|
|
}}>
|
|
<Tabs
|
|
value={value}
|
|
onChange={handleChange}
|
|
textColor="primary"
|
|
indicatorColor="primary"
|
|
orientation="vertical"
|
|
sx={{
|
|
alignItems: 'flex-start',
|
|
'& .MuiTabs-indicator': { display: 'none' },
|
|
paddingTop: '0.5rem'
|
|
}}
|
|
>
|
|
<Tab
|
|
value="robots"
|
|
label={t('mainmenu.recordings')}
|
|
icon={<AutoAwesome sx={{ fontSize: 20 }} />}
|
|
iconPosition="start"
|
|
disableRipple={true}
|
|
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: '16px' }}
|
|
onClick={handleRobotsClick} />
|
|
<Tab value="runs"
|
|
label={t('mainmenu.runs')}
|
|
icon={<PlayArrow sx={{ fontSize: 20 }} />}
|
|
iconPosition="start"
|
|
disableRipple={true}
|
|
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: '16px' }} />
|
|
<Tab value="proxy"
|
|
label={t('mainmenu.proxy')}
|
|
icon={<Usb sx={{ fontSize: 20 }} />}
|
|
iconPosition="start"
|
|
disableRipple={true}
|
|
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: '16px' }} />
|
|
<Tab value="apikey"
|
|
label={t('mainmenu.apikey')}
|
|
icon={<VpnKey sx={{ fontSize: 20 }}/>}
|
|
iconPosition="start"
|
|
disableRipple={true}
|
|
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: '16px' }} />
|
|
</Tabs>
|
|
<Divider sx={{ borderColor: theme.palette.mode === 'dark' ? "#080808ff" : "" }} />
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', textAlign: 'left' }}>
|
|
<Button
|
|
href='https://docs.maxun.dev/sdk/sdk-overview'
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
sx={buttonStyles} startIcon={<ArrowForwardIos sx={{ fontSize: 20 }} />}>
|
|
SDK
|
|
</Button>
|
|
<Button
|
|
onClick={() => setDocModalOpen(true)}
|
|
sx={buttonStyles}
|
|
startIcon={<Description sx={{ fontSize: 20 }} />}
|
|
>
|
|
Documentation
|
|
</Button>
|
|
<Modal open={docModalOpen ?? false} onClose={() => setDocModalOpen(false)}>
|
|
<Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', bgcolor: 'background.paper', borderRadius: 2, p: 4, width: 400 }}>
|
|
<Stack spacing={2}>
|
|
<Button
|
|
href="https://docs.maxun.dev"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
variant="outlined"
|
|
startIcon={<Description />}
|
|
fullWidth
|
|
>
|
|
Documentation
|
|
</Button>
|
|
<Button
|
|
href="https://www.youtube.com/@MaxunOSS/videos"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
variant="outlined"
|
|
startIcon={<SlowMotionVideo />}
|
|
fullWidth
|
|
>
|
|
Video Tutorials
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</Modal>
|
|
<Button
|
|
href='https://app.maxun.dev/'
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
sx={buttonStyles} startIcon={<CloudQueue sx={{ fontSize: 16 }} />}>
|
|
Join Maxun Cloud
|
|
</Button>
|
|
<Button onClick={() => setSponsorModalOpen(true)} sx={buttonStyles} startIcon={<Favorite sx={{ fontSize: 16 }} />}>
|
|
Sponsor Us
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Button
|
|
href="https://github.com/getmaxun/maxun"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
sx={starButtonStyles}
|
|
startIcon={
|
|
<Star
|
|
sx={{
|
|
fontSize: 16,
|
|
color: theme.palette.mode === 'light' ? '#ffb400' : '#ffd740'
|
|
}}
|
|
/>
|
|
}
|
|
>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<span>Star us on GitHub</span>
|
|
{isLoading ? (
|
|
<Typography
|
|
variant="caption"
|
|
sx={{
|
|
color: theme.palette.mode === 'light' ? '#666' : '#aaa',
|
|
fontSize: '0.75rem'
|
|
}}
|
|
>
|
|
...
|
|
</Typography>
|
|
) : starCount !== null ? (
|
|
<Box
|
|
sx={{
|
|
backgroundColor: theme.palette.mode === 'light' ? '#f0f0f0' : 'rgba(255, 255, 255, 0.1)',
|
|
borderRadius: '12px',
|
|
padding: '2px 8px',
|
|
fontSize: '0.75rem',
|
|
color: theme.palette.mode === 'light' ? '#666' : '#ccc',
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
{starCount.toLocaleString()}
|
|
</Box>
|
|
) : null}
|
|
</Box>
|
|
</Button>
|
|
</Paper>
|
|
|
|
<Modal open={sponsorModalOpen} onClose={() => setSponsorModalOpen(false)}>
|
|
<Box sx={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', bgcolor: 'rgba(13, 13, 13, 1)', borderRadius: 2, p: 4, width: 600 }}>
|
|
<Typography variant="h6" marginBottom={4}>
|
|
Support Maxun Open Source
|
|
</Typography>
|
|
<Typography variant="body1" gutterBottom>
|
|
Maxun is built by a small, full-time team. Your donations directly contribute to making it better.
|
|
<br />
|
|
Thank you for your support! 🩷
|
|
</Typography>
|
|
<Stack direction="row" spacing={2} mt={4}>
|
|
<Button href="https://github.com/sponsors/amhsirak" target="_blank" rel="noopener noreferrer" variant="outlined" fullWidth>
|
|
Sponsor Maxun on GitHub Sponsors
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}; |