Skip to content

S
sweepstake
Commit d989428f by Arjun Jhukal
Options

updated the app bar functionality

parent 24165bc2
Showing with 211 additions and 98 deletions
src/components/organism/Header/AdminHeader/AdminSearchBar.tsx
// "use client";
import { Box } from "@mui/material";
import { Box, IconButton, InputAdornment, OutlinedInput } from "@mui/material";
import { SearchNormal } from "@wandersonalwes/iconsax-react";
import React from 'react'
......@@ -8,8 +8,16 @@ export default function AdminSearchBar() {
return (
<Box>
<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" />
<SearchNormal color="#71717A" size={16} className="absolute left-2 top-1/2 transform -translate-y-1/2" />
<OutlinedInput
type="search"
startAdornment={
<InputAdornment position="start">
<IconButton edge="start">
<SearchNormal size={32} />
</IconButton>
</InputAdornment>
}
/>
</div>
</Box>
)
......
src/components/organism/Header/AdminHeader/index.tsx
......@@ -6,6 +6,7 @@ import { Add } from '@wandersonalwes/iconsax-react';
import NotificationPage from '../Notification';
import Profile from '../Profile';
import AdminSearchBar from './AdminSearchBar';
import CreatNewRecord from '../CreatNewRecord';
export default function AdminHeader() {
......@@ -18,18 +19,8 @@ export default function AdminHeader() {
<Box className='flex items-center gap-4 justify-between w-full'>
<AdminSearchBar />
<div className="right flex items-center gap-4">
<IconButton
color="inherit"
sx={[
{
maxWidth: "fit-content"
},
]}
className='!bg-light-gray'
>
<Add className='!text-para-light' />
</IconButton>
<NotificationPage />
<CreatNewRecord />
<NotificationPage notifications={[]} />
<Profile />
</div>
</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";
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 Grow from '@mui/material/Grow';
import { Transitions } from '@/components/molecules/Transition';
import Link from 'next/link';
export default function NotificationPage({ badgeCount = 0, width = 300, children }: { badgeCount?: number, width?: number, children?: React.ReactNode }) {
const downMD = useMediaQuery((theme: any) => theme.breakpoints.down('md'));
type Notification = {
label: string;
description: string;
link?: string;
}
export default function NotificationPage({
notifications
}: {
notifications: Notification[]
}) {
const anchorRef = useRef<HTMLButtonElement | null>(null);
const [open, setOpen] = useState(false);
const handleToggle = () => setOpen(prev => !prev);
const handleToggle = () => setOpen((prev) => !prev);
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);
};
const id = open ? 'popper' : undefined;
return (
<Box>
<IconButton ref={anchorRef} onClick={handleToggle} className='!bg-light-gray'>
<Badge badgeContent={badgeCount} color="success" sx={{ '& .MuiBadge-badge': { top: 2, right: 4 } }}>
<IconButton
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" />
</Badge>
</IconButton>
<Popper
placement={downMD ? 'bottom' : 'bottom-end'}
id={id}
open={open}
anchorEl={anchorRef.current}
role={undefined}
placement="bottom-end"
transition
disablePortal
popperOptions={{ modifiers: [{ name: 'offset', options: { offset: [downMD ? -5 : 0, 9] } }] }}
className='top-[100%]'
style={{ zIndex: 1300 }}
>
{({ TransitionProps }) => (
<Transitions type="grow" position={downMD ? 'top' : 'top-right'} in={open} {...TransitionProps}>
<Paper sx={(theme) => ({ borderRadius: 1.5, width: { xs: 320, sm: 420 } })}>
<Fade {...TransitionProps} timeout={300}>
<Paper
elevation={3}
sx={{
width: 300,
borderRadius: 2,
mt: 1,
}}
>
<ClickAwayListener onClickAway={handleClose}>
<CardContent>
<Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
<Typography variant="h5">Notifications</Typography>
<Link href="#" color="title">
Mark all read
</Link>
</Stack>
<Stack direction="row" sx={{ justifyContent: 'center', mt: 1.5 }}>
<Link href="#" color="title">
View all
</Link>
</Stack>
</CardContent>
<Box>
<div className="flex items-center justify-between mb-4 px-1">
<Typography variant="h3" >
Notifications
</Typography>
<Link href={"#"} className='text-[12px] leading-[120%] hover:text-primary-dark font-medium'>View All</Link>
</div>
{
notifications.length ? (
<List className='max-h-[320px] overflow-auto px-1'>
{
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>
</ListItem>
))
}
</List>
) : (
<Typography variant="body2" color="text.title" sx={{ pt: 1, px: 1 }}>
No new notifications
</Typography>
)
}
</Box>
</ClickAwayListener>
</Paper>
</Transitions>
</Fade>
)}
</Popper>
</Box>
......
src/components/organism/Header/Profile.tsx
import Avatar from '@/components/atom/Avatar';
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 { useRouter } from 'next/navigation';
import React, { useRef, useState } from 'react'
const avataur1 = '/assets/images/avatar-6.png';
......@@ -11,88 +16,73 @@ export default function Profile() {
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const dispatch = useAppDispatch();
const router = useRouter();
const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
const handleLogout = () => {
}
const id = open ? 'profile-dropdown' : ""
return (
<Box >
<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"
ref={anchorRef}
aria-controls={open ? 'profile-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
{/* <Avatar alt="profile user" src={avataur1} /> */}
<Stack direction="row" sx={{ gap: 1.25, alignItems: 'center' }}>
<div className='hidden lg:flex items-center gap-1'>
<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>
<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
</p>
</Stack>
</Stack>
</div>
<ArrowDown2 size={14} />
</div>
</Button>
<Popper
placement="bottom-end"
id={id}
open={open}
anchorEl={anchorRef.current}
role={undefined}
placement="bottom-end"
transition
disablePortal
modifiers={[
{
name: 'offset',
options: {
offset: [0, 8], // spacing from anchor
},
},
]}
style={{ zIndex: 1300 }}
>
{({ TransitionProps }) => (
<Transitions type="grow" position="top-right" in={open} {...TransitionProps}>
<Fade {...TransitionProps} timeout={300}>
<Paper
elevation={3}
sx={{
backgroundColor: 'transparent',
boxShadow: 'none',
borderRadius: 0,
width: '100%', // take full width
maxWidth: 'unset', // remove MUI’s maxWidth restriction
width: 215,
// p: 2,
borderRadius: 2,
mt: 1,
}}
elevation={0}
>
<ClickAwayListener onClickAway={handleClose}>
<List>
<ListItem>
<Link href="#">Visit Sweepstake Website</Link>
</ListItem>
<ListItem
onClick={handleLogout}
className="text-red-600 cursor-pointer"
>
Logout
<ListItemText>
<Link href={PATH.ADMIN.GAMES.ADD_GAME.ROOT} className='block py-3 px-4 hover:bg-[#FBF4FB]'>Visit Sweepstake</Link>
</ListItemText>
<ListItemText>
<Link href={""} className='block py-3 px-4 hover:bg-[#FBF4FB] text-red-500' onClick={(e) => {
e.preventDefault();
dispatch(clearTokens());
router.replace(PATH.AUTH.LOGIN.ROOT)
}}>Logout</Link>
</ListItemText>
</ListItem>
</List>
</ClickAwayListener>
</Paper>
</Transitions>
</Fade>
)}
</Popper>
</Box>
......
src/components/organism/Header/index.tsx
......@@ -47,7 +47,7 @@ export default function Header({ open, handleDrawerOpen }: {
const user = { role: "ADMIN" }
return (
<AppBar position="fixed" open={open}>
<Toolbar>
<Toolbar sx={{ gap: "16px" }}>
<IconButton
color="inherit"
......@@ -56,7 +56,6 @@ export default function Header({ open, handleDrawerOpen }: {
edge="start"
sx={[
{
marginRight: 5,
maxWidth: "fit-content"
},
]}
......@@ -72,6 +71,6 @@ export default function Header({ open, handleDrawerOpen }: {
)
}
</Toolbar>
</AppBar>
</AppBar >
)
}
src/theme/adminPalette.ts
......@@ -133,7 +133,7 @@ export default function Palette(mode: ThemeMode) {
MuiIconButton: {
styleOverrides: {
root: {
borderRadius: "8px"
borderRadius: "8px",
}
}
},
......@@ -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