123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288 |
- import { useRef, useState } from "react";
- // material-ui
- import { useTheme } from "@mui/material/styles";
- import {
- Avatar,
- Badge,
- Box,
- ClickAwayListener,
- Divider,
- List,
- ListItemButton,
- ListItemAvatar,
- ListItemText,
- ListItemSecondaryAction,
- Paper,
- Popper,
- Tooltip,
- Typography,
- useMediaQuery
- } from "@mui/material";
- // project import
- import MainCard from "@/components/MainCard";
- import IconButton from "@/components/@extended/IconButton";
- import Transitions from "@/components/@extended/Transitions";
- // assets
- import { BellOutlined, CheckCircleOutlined, GiftOutlined, MessageOutlined, SettingOutlined } from "@ant-design/icons";
- // sx styles
- const avatarSX = {
- width: 36,
- height: 36,
- fontSize: "1rem"
- };
- const actionSX = {
- mt: "6px",
- ml: 1,
- top: "auto",
- right: "auto",
- alignSelf: "flex-start",
- transform: "none"
- };
- // ==============================|| HEADER CONTENT - NOTIFICATION ||============================== //
- const Notification = () => {
- const theme = useTheme();
- const matchesXs = useMediaQuery(theme.breakpoints.down("md"));
- const anchorRef = useRef<any>(null);
- const [read, setRead] = useState(2);
- const [open, setOpen] = useState(false);
- const handleToggle = () => {
- setOpen((prevOpen) => !prevOpen);
- };
- const handleClose = (event: MouseEvent | TouchEvent) => {
- if (anchorRef.current && anchorRef.current.contains(event.target)) {
- return;
- }
- setOpen(false);
- };
- const iconBackColorOpen = theme.palette.mode === "dark" ? "grey.200" : "grey.300";
- const iconBackColor = theme.palette.mode === "dark" ? "background.default" : "grey.100";
- return (
- <Box sx={{ flexShrink: 0, ml: 0.75 }}>
- <IconButton
- color="secondary"
- variant="light"
- sx={{ color: "text.primary", bgcolor: open ? iconBackColorOpen : iconBackColor }}
- aria-label="open profile"
- ref={anchorRef}
- aria-controls={open ? "profile-grow" : undefined}
- aria-haspopup="true"
- onClick={handleToggle}
- >
- <Badge badgeContent={read} color="primary">
- <BellOutlined />
- </Badge>
- </IconButton>
- <Popper
- placement={matchesXs ? "bottom" : "bottom-end"}
- open={open}
- anchorEl={anchorRef.current}
- role={undefined}
- transition
- disablePortal
- popperOptions={{
- modifiers: [
- {
- name: "offset",
- options: {
- offset: [matchesXs ? -5 : 0, 9]
- }
- }
- ]
- }}
- >
- {({ TransitionProps }) => (
- <Transitions type="fade" in={open} {...TransitionProps}>
- <Paper
- sx={{
- boxShadow: theme.customShadows.z1,
- width: "100%",
- minWidth: 285,
- maxWidth: 420,
- [theme.breakpoints.down("md")]: {
- maxWidth: 285
- }
- }}
- >
- <ClickAwayListener onClickAway={handleClose}>
- <MainCard
- title="Notification"
- elevation={0}
- border={false}
- content={false}
- secondary={
- <>
- {read > 0 && (
- <Tooltip title="Mark as all read">
- <IconButton color="success" size="small" onClick={() => setRead(0)}>
- <CheckCircleOutlined style={{ fontSize: "1.15rem" }} />
- </IconButton>
- </Tooltip>
- )}
- </>
- }
- >
- <List
- component="nav"
- sx={{
- p: 0,
- "& .MuiListItemButton-root": {
- py: 0.5,
- "&.Mui-selected": { bgcolor: "grey.50", color: "text.primary" },
- "& .MuiAvatar-root": avatarSX,
- "& .MuiListItemSecondaryAction-root": { ...actionSX, position: "relative" }
- }
- }}
- >
- <ListItemButton selected={read > 0}>
- <ListItemAvatar>
- <Avatar
- sx={{
- color: "success.main",
- bgcolor: "success.lighter"
- }}
- >
- <GiftOutlined />
- </Avatar>
- </ListItemAvatar>
- <ListItemText
- primary={
- <Typography variant="h6">
- It's{" "}
- <Typography component="span" variant="subtitle1">
- Cristina danny's
- </Typography>{" "}
- birthday today.
- </Typography>
- }
- secondary="2 min ago"
- />
- <ListItemSecondaryAction>
- <Typography variant="caption" noWrap>
- 3:00 AM
- </Typography>
- </ListItemSecondaryAction>
- </ListItemButton>
- <Divider />
- <ListItemButton>
- <ListItemAvatar>
- <Avatar
- sx={{
- color: "primary.main",
- bgcolor: "primary.lighter"
- }}
- >
- <MessageOutlined />
- </Avatar>
- </ListItemAvatar>
- <ListItemText
- primary={
- <Typography variant="h6">
- <Typography component="span" variant="subtitle1">
- Aida Burg
- </Typography>{" "}
- commented your post.
- </Typography>
- }
- secondary="5 August"
- />
- <ListItemSecondaryAction>
- <Typography variant="caption" noWrap>
- 6:00 PM
- </Typography>
- </ListItemSecondaryAction>
- </ListItemButton>
- <Divider />
- <ListItemButton selected={read > 0}>
- <ListItemAvatar>
- <Avatar
- sx={{
- color: "error.main",
- bgcolor: "error.lighter"
- }}
- >
- <SettingOutlined />
- </Avatar>
- </ListItemAvatar>
- <ListItemText
- primary={
- <Typography variant="h6">
- Your Profile is Complete
- <Typography component="span" variant="subtitle1">
- 60%
- </Typography>{" "}
- </Typography>
- }
- secondary="7 hours ago"
- />
- <ListItemSecondaryAction>
- <Typography variant="caption" noWrap>
- 2:45 PM
- </Typography>
- </ListItemSecondaryAction>
- </ListItemButton>
- <Divider />
- <ListItemButton>
- <ListItemAvatar>
- <Avatar
- sx={{
- color: "primary.main",
- bgcolor: "primary.lighter"
- }}
- >
- C
- </Avatar>
- </ListItemAvatar>
- <ListItemText
- primary={
- <Typography variant="h6">
- <Typography component="span" variant="subtitle1">
- Cristina Danny
- </Typography>{" "}
- invited to join{" "}
- <Typography component="span" variant="subtitle1">
- Meeting.
- </Typography>
- </Typography>
- }
- secondary="Daily scrum meeting time"
- />
- <ListItemSecondaryAction>
- <Typography variant="caption" noWrap>
- 9:10 PM
- </Typography>
- </ListItemSecondaryAction>
- </ListItemButton>
- <Divider />
- <ListItemButton sx={{ textAlign: "center", py: `${12}px !important` }}>
- <ListItemText
- primary={
- <Typography variant="h6" color="primary">
- View All
- </Typography>
- }
- />
- </ListItemButton>
- </List>
- </MainCard>
- </ClickAwayListener>
- </Paper>
- </Transitions>
- )}
- </Popper>
- </Box>
- );
- };
- export default Notification;
|