diff --git a/src/components/dashboard/MainMenu.tsx b/src/components/dashboard/MainMenu.tsx index 6cdcc73e..4bd7e4ed 100644 --- a/src/components/dashboard/MainMenu.tsx +++ b/src/components/dashboard/MainMenu.tsx @@ -1,12 +1,11 @@ -import React, { useState } from 'react'; +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 } from "@mui/icons-material"; +import { AutoAwesome, VpnKey, Usb, CloudQueue, Description, Favorite, SlowMotionVideo, PlayArrow, ArrowForwardIos, Star } from "@mui/icons-material"; import { useTranslation } from 'react-i18next'; -import { useGlobalInfoStore } from "../../context/globalInfo"; interface MainMenuProps { value: string; @@ -18,12 +17,42 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp const { t } = useTranslation(); const navigate = useNavigate(); const location = useLocation(); - const { notify } = useGlobalInfoStore(); const [sponsorModalOpen, setSponsorModalOpen] = useState(false); const [docModalOpen, setDocModalOpen] = useState(false); + const [starCount, setStarCount] = useState(null); + const [isLoading, setIsLoading] = useState(false); - const ossDiscountCode = "MAXUNOSS8"; + 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}`); @@ -37,24 +66,15 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp } }; - const copyDiscountCode = () => { - navigator.clipboard.writeText(ossDiscountCode).then(() => { - notify("success", "Discount code copied to clipboard!"); - }).catch(err => { - console.error('Failed to copy text: ', err); - notify("error", "Failed to copy discount code."); - }); - }; - const defaultcolor = theme.palette.mode === 'light' ? 'black' : 'white'; const buttonStyles = { justifyContent: 'flex-start', textAlign: 'left', - fontSize: '17px', + fontSize: '15px', letterSpacing: '0.02857em', - padding: '20px 20px 20px 22px', - minHeight: '48px', + padding: '20px 20px 0px 22px', + minHeight: '60px', minWidth: '100%', display: 'flex', alignItems: 'center', @@ -66,6 +86,23 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp }, }; + 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 ( <> @@ -74,50 +111,67 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp height: '100%', width: '230px', backgroundColor: theme.palette.background.paper, - paddingTop: '0.5rem', color: defaultcolor, + display: 'flex', + flexDirection: 'column', }} variant="outlined" square > - + } + icon={} iconPosition="start" disableRipple={true} - sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} + sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: '16px' }} onClick={handleRobotsClick} /> } + icon={} iconPosition="start" disableRipple={true} - sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} /> + sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: '16px' }} /> } + icon={} iconPosition="start" disableRipple={true} - sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} /> + sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: '16px' }} /> } + icon={} iconPosition="start" disableRipple={true} - sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} /> + sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: '16px' }} /> + - + + + setSponsorModalOpen(false)}> @@ -183,4 +281,4 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp ); -}; +}; \ No newline at end of file diff --git a/src/components/dashboard/NavBar.tsx b/src/components/dashboard/NavBar.tsx index f9b4bc90..41a315b1 100644 --- a/src/components/dashboard/NavBar.tsx +++ b/src/components/dashboard/NavBar.tsx @@ -27,7 +27,6 @@ import { GitHub, Update, Close, - Description, LightMode, DarkMode, Translate diff --git a/src/context/theme-provider.tsx b/src/context/theme-provider.tsx index 4803d915..9b49adc5 100644 --- a/src/context/theme-provider.tsx +++ b/src/context/theme-provider.tsx @@ -2,6 +2,7 @@ import React, { createContext, useContext, useState, useEffect } from 'react'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; + const lightTheme = createTheme({ palette: { primary: { @@ -75,7 +76,8 @@ const lightTheme = createTheme({ MuiTab: { styleOverrides: { root: { - textTransform: "none", + minHeight: 60, + textTransform: "none", }, }, }, @@ -212,6 +214,7 @@ const darkTheme = createTheme({ MuiTab: { styleOverrides: { root: { + minHeight: 60, textTransform: "none", color: '#ffffff', "&.Mui-selected": {