diff --git a/src/components/dashboard/MainMenu.tsx b/src/components/dashboard/MainMenu.tsx index 999b9a83..3dcf34d8 100644 --- a/src/components/dashboard/MainMenu.tsx +++ b/src/components/dashboard/MainMenu.tsx @@ -1,12 +1,12 @@ -import React from 'react'; +import React, { useState } from 'react'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Box from '@mui/material/Box'; import { useNavigate } from 'react-router-dom'; -import { Paper, Button, useTheme } from "@mui/material"; -import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Description } from "@mui/icons-material"; +import { Paper, Button, useTheme, Modal, Typography, Stack, TextField, InputAdornment, IconButton } from "@mui/material"; // Added TextField, InputAdornment, IconButton +import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Description, Favorite, ContentCopy } from "@mui/icons-material"; // Added ContentCopy import { useTranslation } from 'react-i18next'; -import i18n from '../../i18n'; +import { useGlobalInfoStore } from "../../context/globalInfo"; interface MainMenuProps { value: string; @@ -17,20 +17,33 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp const theme = useTheme(); const { t } = useTranslation(); const navigate = useNavigate(); + const { notify } = useGlobalInfoStore(); + + const [cloudModalOpen, setCloudModalOpen] = useState(false); + const [sponsorModalOpen, setSponsorModalOpen] = useState(false); + + const ossDiscountCode = "MAXUNOSS8"; const handleChange = (event: React.SyntheticEvent, newValue: string) => { navigate(`/${newValue}`); handleChangeContent(newValue); }; - // Define colors based on theme mode + 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', - letterSpacing: '0.02857em', padding: '20px 16px 20px 22px', minHeight: '48px', minWidth: '100%', @@ -39,91 +52,109 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp textTransform: 'none', color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit', '&:hover': { - color: theme.palette.mode === 'light' ? '#6C6C6C' : 'inherit', backgroundColor: theme.palette.mode === 'light' ? '#f5f5f5' : 'inherit', }, }; - return ( - - - - + + + + } iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} /> + } iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} /> + } iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} /> + } iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} /> + +
+ + + + + +
+
+ + setCloudModalOpen(false)}> + + + Join Maxun Cloud + + + Unlock reliable web data extraction. Maxun Cloud ensures you bypass blocks and scale with ease. + + + As a thank-you to open source users, enjoy 8% off your subscription! + + + Use the discount code + + + + + + + ), }} - value="robots" - label={t('mainmenu.recordings')} - icon={} - iconPosition="start" + sx={{ mb: 2, fontSize: 13 }} /> - } - iconPosition="start" - /> - } - iconPosition="start" - /> - } - iconPosition="start" - /> -
-
- - {/* */} - - -
-
+ + + setSponsorModalOpen(false)}> + + + Support Maxun Open Source + + + Maxun is built by a small, full-time team. Your donations directly contribute to making it better. +
+
+ Thank you for your support! 💙 +
+ + + + +
+
+ ); };