Skip to content

S
sweepstake
Commit d989428f by Arjun Jhukal
Options

updated the app bar functionality

parent 24165bc2
Showing with 210 additions and 97 deletions
src/components/organism/Header/AdminHeader/AdminSearchBar.tsx
// "use client"; // "use client";
import { Box } from "@mui/material"; import { Box, IconButton, InputAdornment, OutlinedInput } from "@mui/material";
import { SearchNormal } from "@wandersonalwes/iconsax-react"; import { SearchNormal } from "@wandersonalwes/iconsax-react";
import React from 'react' import React from 'react'
...@@ -8,8 +8,16 @@ export default function AdminSearchBar() { ...@@ -8,8 +8,16 @@ export default function AdminSearchBar() {
return ( return (
<Box> <Box>
<div className="inpute__field relative"> <div className="inpute__field relative">
<input type="search" placeholder="Ctrl + K" name="search" id="search" className="rounded-[4px] border-solid border-[1px] border-gray pl-5 outline-none focus:outline-primary-light" /> <OutlinedInput
<SearchNormal color="#71717A" size={16} className="absolute left-2 top-1/2 transform -translate-y-1/2" /> type="search"
startAdornment={
<InputAdornment position="start">
<IconButton edge="start">
<SearchNormal size={32} />
</IconButton>
</InputAdornment>
}
/>
</div> </div>
</Box> </Box>
) )
......
src/components/organism/Header/AdminHeader/index.tsx
...@@ -6,6 +6,7 @@ import { Add } from '@wandersonalwes/iconsax-react'; ...@@ -6,6 +6,7 @@ import { Add } from '@wandersonalwes/iconsax-react';
import NotificationPage from '../Notification'; import NotificationPage from '../Notification';
import Profile from '../Profile'; import Profile from '../Profile';
import AdminSearchBar from './AdminSearchBar'; import AdminSearchBar from './AdminSearchBar';
import CreatNewRecord from '../CreatNewRecord';
export default function AdminHeader() { export default function AdminHeader() {
...@@ -18,18 +19,8 @@ export default function AdminHeader() { ...@@ -18,18 +19,8 @@ export default function AdminHeader() {
<Box className='flex items-center gap-4 justify-between w-full'> <Box className='flex items-center gap-4 justify-between w-full'>
<AdminSearchBar /> <AdminSearchBar />
<div className="right flex items-center gap-4"> <div className="right flex items-center gap-4">
<IconButton <CreatNewRecord />
color="inherit" <NotificationPage notifications={[]} />
sx={[
{
maxWidth: "fit-content"
},
]}
className='!bg-light-gray'
>
<Add className='!text-para-light' />
</IconButton>
<NotificationPage />
<Profile /> <Profile />
</div> </div>
</Box> </Box>
......
src/components/organism/Header/CreatNewRecord.tsx 0 → 100644
import { PATH } from '@/routes/PATH';
import { Box, ClickAwayListener, Fade, IconButton, List, ListItem, ListItemText, Paper, Popper, Typography } from '@mui/material'
import { Add } from '@wandersonalwes/iconsax-react'
import Link from 'next/link';
import React from 'react'
export default function CreatNewRecord() {
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef<HTMLButtonElement | null>(null);
const id = open ? 'create-new-record' : ""
const handleToggle = () => setOpen((prev) => !prev);
const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current?.contains(event.target as Node)) return;
setOpen(false);
};
return (
<Box>
<IconButton
color="inherit"
sx={[
{
maxWidth: "fit-content",
marginRight: 0
},
]}
className='!bg-light-gray'
onClick={handleToggle}
ref={anchorRef}
>
<Add className='!text-para-light' />
</IconButton>
<Popper
id={id}
open={open}
anchorEl={anchorRef.current}
placement="bottom-end"
transition
style={{ zIndex: 1300 }}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={300}>
<Paper
elevation={3}
sx={{
width: 215,
// p: 2,
borderRadius: 2,
mt: 1,
}}
>
<ClickAwayListener onClickAway={handleClose}>
<List>
<ListItem>
<ListItemText>
<Link href={PATH.ADMIN.GAMES.ADD_GAME.ROOT} className='block py-3 px-4 hover:bg-[#FBF4FB]'>Add Games</Link>
</ListItemText>
<ListItemText>
<Link href={PATH.ADMIN.GAMES.ADD_GAME.ROOT} className='block py-3 px-4 hover:bg-[#FBF4FB]'>Add Players</Link>
</ListItemText>
<ListItemText>
<Link href={PATH.ADMIN.GAMES.ADD_GAME.ROOT} className='block py-3 px-4 hover:bg-[#FBF4FB]'>Add Offers</Link>
</ListItemText>
</ListItem>
</List>
</ClickAwayListener>
</Paper>
</Fade>
)}
</Popper>
</Box>
)
}
src/components/organism/Header/Notification.tsx
"use client"; "use client";
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { Badge, Box, IconButton, Popper, useMediaQuery, Paper, ClickAwayListener, CardContent, Typography, Stack } from '@mui/material'; import {
Badge,
Box,
IconButton,
Popper,
Paper,
ClickAwayListener,
Typography,
List,
ListItem,
} from '@mui/material';
import Fade from '@mui/material/Fade'; // ✅ Import Fade
import { Notification } from '@wandersonalwes/iconsax-react'; import { Notification } from '@wandersonalwes/iconsax-react';
import Grow from '@mui/material/Grow';
import { Transitions } from '@/components/molecules/Transition';
import Link from 'next/link'; import Link from 'next/link';
export default function NotificationPage({ badgeCount = 0, width = 300, children }: { badgeCount?: number, width?: number, children?: React.ReactNode }) { type Notification = {
const downMD = useMediaQuery((theme: any) => theme.breakpoints.down('md')); label: string;
description: string;
link?: string;
}
export default function NotificationPage({
notifications
}: {
notifications: Notification[]
}) {
const anchorRef = useRef<HTMLButtonElement | null>(null); const anchorRef = useRef<HTMLButtonElement | null>(null);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const handleToggle = () => setOpen(prev => !prev); const handleToggle = () => setOpen((prev) => !prev);
const handleClose = (event: MouseEvent | TouchEvent) => { const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current && anchorRef.current.contains(event.target as Node)) return; if (anchorRef.current?.contains(event.target as Node)) return;
setOpen(false); setOpen(false);
}; };
const id = open ? 'popper' : undefined;
return ( return (
<Box> <Box>
<IconButton ref={anchorRef} onClick={handleToggle} className='!bg-light-gray'> <IconButton
<Badge badgeContent={badgeCount} color="success" sx={{ '& .MuiBadge-badge': { top: 2, right: 4 } }}> aria-describedby={id}
ref={anchorRef}
onClick={handleToggle}
className="!bg-light-gray"
>
<Badge
badgeContent={notifications.length}
color="success"
sx={{ '& .MuiBadge-badge': { top: 2, right: 4 } }}
>
<Notification variant="Bold" className="!text-para-light" /> <Notification variant="Bold" className="!text-para-light" />
</Badge> </Badge>
</IconButton> </IconButton>
<Popper <Popper
placement={downMD ? 'bottom' : 'bottom-end'} id={id}
open={open} open={open}
anchorEl={anchorRef.current} anchorEl={anchorRef.current}
role={undefined} placement="bottom-end"
transition transition
disablePortal style={{ zIndex: 1300 }}
popperOptions={{ modifiers: [{ name: 'offset', options: { offset: [downMD ? -5 : 0, 9] } }] }}
className='top-[100%]'
> >
{({ TransitionProps }) => ( {({ TransitionProps }) => (
<Transitions type="grow" position={downMD ? 'top' : 'top-right'} in={open} {...TransitionProps}> <Fade {...TransitionProps} timeout={300}>
<Paper sx={(theme) => ({ borderRadius: 1.5, width: { xs: 320, sm: 420 } })}> <Paper
elevation={3}
sx={{
width: 300,
borderRadius: 2,
mt: 1,
}}
>
<ClickAwayListener onClickAway={handleClose}> <ClickAwayListener onClickAway={handleClose}>
<CardContent> <Box>
<Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}> <div className="flex items-center justify-between mb-4 px-1">
<Typography variant="h5">Notifications</Typography> <Typography variant="h3" >
<Link href="#" color="title"> Notifications
Mark all read </Typography>
</Link> <Link href={"#"} className='text-[12px] leading-[120%] hover:text-primary-dark font-medium'>View All</Link>
</Stack> </div>
{
<Stack direction="row" sx={{ justifyContent: 'center', mt: 1.5 }}> notifications.length ? (
<Link href="#" color="title"> <List className='max-h-[320px] overflow-auto px-1'>
View all {
notifications.map((notification) => (
<ListItem className='border-b-solid border-b-gray border-b-[1px] !pb-2 mb-2' key={notification.label}>
<Link href={""}>
<strong className="text-[12px] leading-[120%] font-[500] block mb-1">New User admin404 registerd</strong>
<p className='text-[10px] leading-[120%] text-para-light'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil, porro!</p>
</Link> </Link>
</Stack> </ListItem>
</CardContent> ))
}
</List>
) : (
<Typography variant="body2" color="text.title" sx={{ pt: 1, px: 1 }}>
No new notifications
</Typography>
)
}
</Box>
</ClickAwayListener> </ClickAwayListener>
</Paper> </Paper>
</Transitions> </Fade>
)} )}
</Popper> </Popper>
</Box> </Box>
......
src/components/organism/Header/Profile.tsx
import Avatar from '@/components/atom/Avatar'; import Avatar from '@/components/atom/Avatar';
import { Transitions } from '@/components/molecules/Transition'; import { Transitions } from '@/components/molecules/Transition';
import { Box, Button, ButtonBase, ClickAwayListener, List, ListItem, Paper, Popper, Stack, Typography } from '@mui/material' import { useAppDispatch } from '@/hooks/hook';
import { PATH } from '@/routes/PATH';
import { clearTokens } from '@/slice/authSlice';
import { Box, Button, ButtonBase, ClickAwayListener, Fade, List, ListItem, ListItemText, Paper, Popper, Stack, Typography } from '@mui/material'
import { ArrowDown2 } from '@wandersonalwes/iconsax-react';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/navigation';
import React, { useRef, useState } from 'react' import React, { useRef, useState } from 'react'
const avataur1 = '/assets/images/avatar-6.png'; const avataur1 = '/assets/images/avatar-6.png';
...@@ -11,88 +16,73 @@ export default function Profile() { ...@@ -11,88 +16,73 @@ export default function Profile() {
const handleToggle = () => { const handleToggle = () => {
setOpen((prevOpen) => !prevOpen); setOpen((prevOpen) => !prevOpen);
}; };
const dispatch = useAppDispatch();
const router = useRouter();
const handleClose = (event: MouseEvent | TouchEvent) => { const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) { if (anchorRef.current && anchorRef.current.contains(event.target)) {
return; return;
} }
setOpen(false); setOpen(false);
}; };
const handleLogout = () => { const id = open ? 'profile-dropdown' : ""
}
return ( return (
<Box > <Box >
<Button <Button
sx={(theme) => ({
p: 0.25,
borderRadius: 1,
'&:hover': { bgcolor: 'secondary.lighter', ...theme.applyStyles('dark', { bgcolor: 'secondary.light' }) },
'&:focus-visible': {
outline: `2px solid ${theme.palette.secondary.dark}`,
outlineOffset: 2
}
})}
aria-label="open profile" aria-label="open profile"
ref={anchorRef} ref={anchorRef}
aria-controls={open ? 'profile-grow' : undefined} aria-controls={open ? 'profile-grow' : undefined}
aria-haspopup="true" aria-haspopup="true"
onClick={handleToggle} onClick={handleToggle}
> >
{/* <Avatar alt="profile user" src={avataur1} /> */} <div className='hidden lg:flex items-center gap-1'>
<Stack direction="row" sx={{ gap: 1.25, alignItems: 'center' }}>
<Avatar alt="profile user" src={avataur1} /> <Avatar alt="profile user" src={avataur1} />
<Stack> <div>
<strong className='text-[14px] leading-[120%] font-bold text-text-title block mb-1 text-nowrap'>{"Arjun Jhukal"}</strong> <strong className='text-[14px] leading-[120%] font-bold text-text-title block mb-1 text-nowrap'>{"Arjun Jhukal"}</strong>
<p className='text-[12px] text-left leading-[120%] font-bold text-primary-light text-nowrap'> <p className='text-[12px] text-left leading-[120%] font-[500] text-para-light text-nowrap'>
UI/UX Designer UI/UX Designer
</p> </p>
</Stack> </div>
</Stack> <ArrowDown2 size={14} />
</div>
</Button> </Button>
<Popper <Popper
placement="bottom-end" id={id}
open={open} open={open}
anchorEl={anchorRef.current} anchorEl={anchorRef.current}
role={undefined} placement="bottom-end"
transition transition
disablePortal style={{ zIndex: 1300 }}
modifiers={[
{
name: 'offset',
options: {
offset: [0, 8], // spacing from anchor
},
},
]}
> >
{({ TransitionProps }) => ( {({ TransitionProps }) => (
<Transitions type="grow" position="top-right" in={open} {...TransitionProps}> <Fade {...TransitionProps} timeout={300}>
<Paper <Paper
elevation={3}
sx={{ sx={{
backgroundColor: 'transparent', width: 215,
boxShadow: 'none', // p: 2,
borderRadius: 0, borderRadius: 2,
width: '100%', // take full width mt: 1,
maxWidth: 'unset', // remove MUI’s maxWidth restriction
}} }}
elevation={0}
> >
<ClickAwayListener onClickAway={handleClose}> <ClickAwayListener onClickAway={handleClose}>
<List> <List>
<ListItem> <ListItem>
<Link href="#">Visit Sweepstake Website</Link> <ListItemText>
</ListItem> <Link href={PATH.ADMIN.GAMES.ADD_GAME.ROOT} className='block py-3 px-4 hover:bg-[#FBF4FB]'>Visit Sweepstake</Link>
<ListItem </ListItemText>
onClick={handleLogout} <ListItemText>
className="text-red-600 cursor-pointer" <Link href={""} className='block py-3 px-4 hover:bg-[#FBF4FB] text-red-500' onClick={(e) => {
> e.preventDefault();
Logout dispatch(clearTokens());
router.replace(PATH.AUTH.LOGIN.ROOT)
}}>Logout</Link>
</ListItemText>
</ListItem> </ListItem>
</List> </List>
</ClickAwayListener> </ClickAwayListener>
</Paper> </Paper>
</Transitions> </Fade>
)} )}
</Popper> </Popper>
</Box> </Box>
......
src/components/organism/Header/index.tsx
...@@ -47,7 +47,7 @@ export default function Header({ open, handleDrawerOpen }: { ...@@ -47,7 +47,7 @@ export default function Header({ open, handleDrawerOpen }: {
const user = { role: "ADMIN" } const user = { role: "ADMIN" }
return ( return (
<AppBar position="fixed" open={open}> <AppBar position="fixed" open={open}>
<Toolbar> <Toolbar sx={{ gap: "16px" }}>
<IconButton <IconButton
color="inherit" color="inherit"
...@@ -56,7 +56,6 @@ export default function Header({ open, handleDrawerOpen }: { ...@@ -56,7 +56,6 @@ export default function Header({ open, handleDrawerOpen }: {
edge="start" edge="start"
sx={[ sx={[
{ {
marginRight: 5,
maxWidth: "fit-content" maxWidth: "fit-content"
}, },
]} ]}
...@@ -72,6 +71,6 @@ export default function Header({ open, handleDrawerOpen }: { ...@@ -72,6 +71,6 @@ export default function Header({ open, handleDrawerOpen }: {
) )
} }
</Toolbar> </Toolbar>
</AppBar> </AppBar >
) )
} }
src/theme/adminPalette.ts
...@@ -133,7 +133,7 @@ export default function Palette(mode: ThemeMode) { ...@@ -133,7 +133,7 @@ export default function Palette(mode: ThemeMode) {
MuiIconButton: { MuiIconButton: {
styleOverrides: { styleOverrides: {
root: { root: {
borderRadius: "8px" borderRadius: "8px",
} }
} }
}, },
...@@ -262,6 +262,13 @@ export default function Palette(mode: ThemeMode) { ...@@ -262,6 +262,13 @@ export default function Palette(mode: ThemeMode) {
} }
} }
} }
},
MuiPaper: {
styleOverrides: {
root: {
padding: "16px 8px"
}
}
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment