some fixes
This commit is contained in:
AmitChauhan63390
@@ -1,15 +1,25 @@
|
||||
import React, { useState, useContext } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Typography,
|
||||
Tooltip,
|
||||
Chip
|
||||
} from "@mui/material";
|
||||
import {
|
||||
AccountCircle,
|
||||
Logout,
|
||||
Clear,
|
||||
Brightness4,
|
||||
Brightness7
|
||||
} from "@mui/icons-material";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { stopRecording } from "../../api/recording";
|
||||
import { useGlobalInfoStore } from "../../context/globalInfo";
|
||||
|
||||
import { IconButton, Menu, MenuItem, Typography, Avatar, Tooltip,Chip } from "@mui/material";
|
||||
import { AccountCircle, Logout, Clear, Brightness4, Brightness7 } from "@mui/icons-material";
|
||||
|
||||
import { AccountCircle, Logout, Clear } from "@mui/icons-material";
|
||||
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { AuthContext } from '../../context/auth';
|
||||
import { SaveRecording } from '../molecules/SaveRecording';
|
||||
import DiscordIcon from '../atoms/DiscordIcon';
|
||||
@@ -23,13 +33,11 @@ interface NavBarProps {
|
||||
}
|
||||
|
||||
export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {
|
||||
|
||||
const { notify, browserId, setBrowserId } = useGlobalInfoStore();
|
||||
const { state, dispatch } = useContext(AuthContext);
|
||||
const { user } = state;
|
||||
const navigate = useNavigate();
|
||||
const { darkMode, toggleTheme } = useThemeMode();
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
|
||||
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
|
||||
@@ -57,99 +65,167 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
|
||||
navigate('/');
|
||||
};
|
||||
|
||||
const renderBrandSection = () => (
|
||||
<BrandContainer>
|
||||
<LogoImage src={MaxunLogo} alt="Maxun Logo" />
|
||||
<ProjectName mode={darkMode ? 'dark' : 'light'}>Maxun</ProjectName>
|
||||
<Chip
|
||||
label="beta"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
marginTop: '10px',
|
||||
borderColor: '#ff00c3',
|
||||
color: '#ff00c3'
|
||||
}}
|
||||
/>
|
||||
</BrandContainer>
|
||||
);
|
||||
|
||||
const renderSocialButtons = () => (
|
||||
<>
|
||||
<IconButton
|
||||
component="a"
|
||||
href="https://discord.gg/5GbPjBUkws"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
sx={{
|
||||
...styles.socialButton,
|
||||
color: darkMode ? '#ffffff' : '#333333',
|
||||
'&:hover': {
|
||||
color: '#ff00c3'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DiscordIcon sx={{ marginRight: '5px' }} />
|
||||
</IconButton>
|
||||
<iframe
|
||||
src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large"
|
||||
frameBorder="0"
|
||||
scrolling="0"
|
||||
width="170"
|
||||
height="30"
|
||||
title="GitHub"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderUserMenu = () => (
|
||||
<>
|
||||
<IconButton
|
||||
onClick={handleMenuOpen}
|
||||
sx={styles.userButton(darkMode)}
|
||||
>
|
||||
<AccountCircle sx={{ marginRight: '5px' }} />
|
||||
<Typography variant="body1">{user?.email}</Typography>
|
||||
</IconButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
backgroundColor: darkMode ? '#1e2124' : '#ffffff',
|
||||
color: darkMode ? '#ffffff' : '#333333'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={() => { handleMenuClose(); logout(); }}>
|
||||
<Logout sx={{ marginRight: '5px' }} /> Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderThemeToggle = () => (
|
||||
<Tooltip title="Toggle light/dark theme">
|
||||
<IconButton
|
||||
onClick={toggleTheme}
|
||||
sx={{
|
||||
color: darkMode ? '#ffffff' : '#333333',
|
||||
'&:hover': {
|
||||
color: '#ff00c3'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{darkMode ? <Brightness7 /> : <Brightness4 />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const renderRecordingControls = () => (
|
||||
<>
|
||||
<IconButton
|
||||
onClick={goToMainMenu}
|
||||
sx={styles.discardButton}
|
||||
>
|
||||
<Clear sx={{ marginRight: '5px' }} />
|
||||
Discard
|
||||
</IconButton>
|
||||
<SaveRecording fileName={recordingName} />
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<NavBarWrapper mode={darkMode ? 'dark' : 'light'}>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-start' }}>
|
||||
<img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
|
||||
|
||||
<div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
|
||||
<Chip label="beta" color="primary" variant="outlined" sx={{ marginTop: '10px' }} />
|
||||
</div>
|
||||
{
|
||||
user ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
|
||||
{!isRecording ? (
|
||||
<>
|
||||
<IconButton
|
||||
component="a"
|
||||
href="https://discord.gg/5GbPjBUkws"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '5px',
|
||||
padding: '8px',
|
||||
marginRight: '30px',
|
||||
}}
|
||||
>
|
||||
<DiscordIcon sx={{ marginRight: '5px' }} />
|
||||
</IconButton>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
|
||||
<IconButton onClick={handleMenuOpen} sx={{
|
||||
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '5px',
|
||||
padding: '8px',
|
||||
|
||||
}}
|
||||
>
|
||||
<DiscordIcon sx={{ marginRight: '5px' }} />
|
||||
</IconButton>
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
|
||||
<IconButton onClick={handleMenuOpen} sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '5px',
|
||||
padding: '8px',
|
||||
marginRight: '10px',
|
||||
'&:hover': { backgroundColor: darkMode ? '#333':'#F5F5F5', color: '#ff00c3' }
|
||||
}}>
|
||||
<AccountCircle sx={{ marginRight: '5px' }} />
|
||||
<Typography variant="body1">{user.email}</Typography>
|
||||
</IconButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
>
|
||||
<MenuItem onClick={() => { handleMenuClose(); logout(); }}>
|
||||
<Logout sx={{ marginRight: '5px' }} /> Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
{/* Theme Toggle Button */}
|
||||
<Tooltip title="Toggle light/dark theme">
|
||||
<IconButton onClick={toggleTheme} color="inherit">
|
||||
{darkMode ? <Brightness7 /> : <Brightness4 />}
|
||||
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{renderBrandSection()}
|
||||
{user && (
|
||||
<ControlsContainer>
|
||||
{!isRecording ? (
|
||||
<>
|
||||
{renderSocialButtons()}
|
||||
{renderUserMenu()}
|
||||
{renderThemeToggle()}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<IconButton onClick={goToMainMenu} sx={{
|
||||
borderRadius: '5px',
|
||||
padding: '8px',
|
||||
background: 'red',
|
||||
color: 'white',
|
||||
marginRight: '10px',
|
||||
'&:hover': { color: 'white', backgroundColor: 'red' }
|
||||
}}>
|
||||
<Clear sx={{ marginRight: '5px' }} />
|
||||
Discard
|
||||
</IconButton>
|
||||
<SaveRecording fileName={recordingName} />
|
||||
</>
|
||||
renderRecordingControls()
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</ControlsContainer>
|
||||
)}
|
||||
</NavBarWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
// Styles
|
||||
const styles = {
|
||||
socialButton: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '5px',
|
||||
padding: '8px',
|
||||
marginRight: '30px',
|
||||
color: '#333333',
|
||||
'&:hover': {
|
||||
color: '#ff00c3'
|
||||
}
|
||||
},
|
||||
userButton: (darkMode: boolean) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: '5px',
|
||||
padding: '8px',
|
||||
marginRight: '10px',
|
||||
color: darkMode ? '#ffffff' : '#333333',
|
||||
'&:hover': {
|
||||
backgroundColor: darkMode ? '#333' : '#F5F5F5',
|
||||
color: '#ff00c3'
|
||||
}
|
||||
}),
|
||||
discardButton: {
|
||||
borderRadius: '5px',
|
||||
padding: '8px',
|
||||
background: 'red',
|
||||
color: 'white',
|
||||
marginRight: '10px',
|
||||
'&:hover': {
|
||||
color: 'white',
|
||||
backgroundColor: '#ff0000'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Styled Components
|
||||
const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>`
|
||||
grid-area: navbar;
|
||||
background-color: ${({ mode }) => (mode === 'dark' ? '#1e2124' : '#ffffff')};
|
||||
@@ -159,7 +235,27 @@ const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>`
|
||||
border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#333' : '#e0e0e0')};
|
||||
`;
|
||||
|
||||
const ProjectName = styled.b<{ mode: 'light' | 'dark' }>`
|
||||
color: ${({ mode }) => (mode === 'dark' ? 'white' : 'black')};
|
||||
font-size: 1.3em;
|
||||
const BrandContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
`;
|
||||
|
||||
const LogoImage = styled.img.attrs({
|
||||
width: 45,
|
||||
height: 40,
|
||||
})`
|
||||
border-radius: 5px;
|
||||
margin: 5px 0px 5px 15px;
|
||||
`;
|
||||
|
||||
const ProjectName = styled.b<{ mode: 'light' | 'dark' }>`
|
||||
color: ${({ mode }) => (mode === 'dark' ? 'white' : '#333333')};
|
||||
font-size: 1.3em;
|
||||
padding: 11px;
|
||||
`;
|
||||
|
||||
const ControlsContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
Reference in New Issue
Block a user