Notification mini tab
This commit is contained in:
npcdazai
@@ -10,10 +10,14 @@ import {
|
||||
Box,
|
||||
Button,
|
||||
HStack,
|
||||
Icon,
|
||||
Image,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputLeftElement,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuList,
|
||||
Popover,
|
||||
PopoverArrow,
|
||||
PopoverBody,
|
||||
@@ -33,6 +37,9 @@ import mainLogo from "../assets/optifii_logo.svg";
|
||||
import { MdNotificationsNone } from "react-icons/md";
|
||||
import womenpfp from "../assets/womenpfp1.png";
|
||||
import { MdLogout } from "react-icons/md";
|
||||
import { IoFilterSharp } from "react-icons/io5";
|
||||
import { MdDeleteOutline, MdOutlineDelete } from "react-icons/md";
|
||||
import { IoIosCheckmark } from "react-icons/io";
|
||||
|
||||
const users = [
|
||||
{ id: 1, user: "Jenny Wilson", role: "Admin" },
|
||||
@@ -49,6 +56,34 @@ const HeaderMain = ({
|
||||
const navigate = useNavigate();
|
||||
const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [notifications, setNotifications] = useState([
|
||||
{
|
||||
id: 1,
|
||||
avatar: "https://bit.ly/dan-abramov",
|
||||
sender: "Admin",
|
||||
time: "1 Min ago",
|
||||
message: "Lorem ipsum dolor sit amet, consectetur",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
avatar: "https://bit.ly/code-beast",
|
||||
sender: "Support",
|
||||
time: "5 Min ago",
|
||||
message: "Your ticket has been updated.",
|
||||
},
|
||||
]);
|
||||
|
||||
// Handler to delete a notification
|
||||
const handleDelete = (id) => {
|
||||
setNotifications(
|
||||
notifications.filter((notification) => notification.id !== id)
|
||||
);
|
||||
};
|
||||
|
||||
// Handler to delete all notifications
|
||||
const handleDeleteAll = () => {
|
||||
setNotifications([]);
|
||||
};
|
||||
|
||||
const openDrawerOnClick = () => {};
|
||||
|
||||
@@ -126,14 +161,192 @@ const HeaderMain = ({
|
||||
justifyContent={"space-between"}
|
||||
>
|
||||
<Box display={"flex"} gap={2}>
|
||||
<Box display={"flex"} gap={2} alignItems={"center"} me={2}>
|
||||
{/* <Box display={"flex"} gap={2} alignItems={"center"} me={2}>
|
||||
<Button
|
||||
onClick={()=>navigate("/notification")}
|
||||
size={"sm"} bg={"none"} p={0}
|
||||
>
|
||||
<MdNotificationsNone fontSize={"20px"} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Box> */}
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={Button}
|
||||
border={"0px"}
|
||||
_hover={{ bgColor: "#FFF" }}
|
||||
// _active={{bgColor:"#FFF"}}
|
||||
fontSize={"xs"}
|
||||
color={"gray.700"}
|
||||
variant="outline"
|
||||
size={"sm"}
|
||||
me={2}
|
||||
>
|
||||
<MdNotificationsNone fontSize={"20px"} />
|
||||
</MenuButton>
|
||||
<MenuList w="342px" h="442px" overflowY="scroll">
|
||||
<HStack
|
||||
borderBottom="1px dashed #CFCFCF"
|
||||
justifyContent="space-between"
|
||||
w="100%"
|
||||
p={2}
|
||||
position="fixed"
|
||||
top={1}
|
||||
bgColor="#FFF"
|
||||
>
|
||||
<Text
|
||||
as="span"
|
||||
fontWeight={600}
|
||||
fontSize="small"
|
||||
color="#000000"
|
||||
>
|
||||
Notification
|
||||
</Text>
|
||||
<Text
|
||||
textDecoration="underline"
|
||||
fontSize="small"
|
||||
color="#696498"
|
||||
onClick={handleDeleteAll}
|
||||
>
|
||||
Clear all
|
||||
</Text>
|
||||
</HStack>
|
||||
<VStack mt={12} mb={12}>
|
||||
<Box bg="#fff" p={1} rounded="md" boxShadow="md">
|
||||
<Text fontSize="small" fontWeight={400} color="#A0A0A0">
|
||||
Today
|
||||
</Text>
|
||||
<VStack spacing={4} align="stretch">
|
||||
{notifications.map((notification) => (
|
||||
<HStack
|
||||
key={notification.id}
|
||||
justifyContent="space-between"
|
||||
bg="#F3F7F9"
|
||||
p={2}
|
||||
rounded="sm"
|
||||
boxShadow="md"
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<Box bg="#d7d3fb" p={1} rounded="full">
|
||||
<Image
|
||||
borderRadius="full"
|
||||
boxSize="30px"
|
||||
src={notification.avatar}
|
||||
alt={notification.sender}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box mb={0}>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize="sm"
|
||||
fontWeight={600}
|
||||
mb={0}
|
||||
>
|
||||
{notification.sender}
|
||||
</Text>
|
||||
<Text
|
||||
as="span"
|
||||
color="#A0A0A0"
|
||||
fontSize="xs"
|
||||
ms={2}
|
||||
fontWeight={500}
|
||||
mb={0}
|
||||
>
|
||||
{notification.time}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text color="#A0A0A0" fontSize="xs" mb={0}>
|
||||
{notification.message}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<Box
|
||||
onClick={() => handleDelete(notification.id)}
|
||||
cursor="pointer"
|
||||
>
|
||||
<MdOutlineDelete color="#686868" size={16} />
|
||||
</Box>
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box bg="#fff" p={1} rounded="md" boxShadow="md">
|
||||
<Text fontSize="small" fontWeight={400} color="#A0A0A0">
|
||||
Yesterday
|
||||
</Text>
|
||||
<VStack spacing={4} align="stretch">
|
||||
{notifications.map((notification) => (
|
||||
<HStack
|
||||
key={notification.id}
|
||||
justifyContent="space-between"
|
||||
bg="#F3F7F9"
|
||||
p={2}
|
||||
rounded="sm"
|
||||
boxShadow="md"
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<Box bg="#d7d3fb" p={1} rounded="full">
|
||||
<Image
|
||||
borderRadius="full"
|
||||
boxSize="30px"
|
||||
src={notification.avatar}
|
||||
alt={notification.sender}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box mb={0}>
|
||||
<Text
|
||||
as="span"
|
||||
fontSize="sm"
|
||||
fontWeight={600}
|
||||
mb={0}
|
||||
>
|
||||
{notification.sender}
|
||||
</Text>
|
||||
<Text
|
||||
as="span"
|
||||
color="#A0A0A0"
|
||||
fontSize="xs"
|
||||
ms={2}
|
||||
fontWeight={500}
|
||||
mb={0}
|
||||
>
|
||||
{notification.time}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text color="#A0A0A0" fontSize="xs" mb={0}>
|
||||
{notification.message}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
<Box
|
||||
onClick={() => handleDelete(notification.id)}
|
||||
cursor="pointer"
|
||||
>
|
||||
<MdOutlineDelete color="#686868" size={16} />
|
||||
</Box>
|
||||
</HStack>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
|
||||
<HStack
|
||||
position="fixed"
|
||||
bottom={0}
|
||||
borderTop="0.5px solid #CFCFCF"
|
||||
p={1}
|
||||
justifyContent="center"
|
||||
bgColor="#fff"
|
||||
w="100%"
|
||||
>
|
||||
<Text onClick={()=>navigate("/notification")} cursor="pointer" fontSize="small" color="#6311CB" fontWeight={600}>
|
||||
View All
|
||||
</Text>
|
||||
</HStack>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
<Box me={4} gap={2} className="d-flex justify-content-center ">
|
||||
<Popover placement="bottom">
|
||||
<Portal>
|
||||
@@ -155,8 +368,13 @@ const HeaderMain = ({
|
||||
</PopoverBody>
|
||||
</Link> */}
|
||||
<PopoverBody className="web-text-medium pointer ">
|
||||
<VStack alignItems="flex-start">
|
||||
<Text color="#A0ABBB" textAlign="left" fontSize={"x-small"} fontWeight={600}>
|
||||
<VStack alignItems="flex-start">
|
||||
<Text
|
||||
color="#A0ABBB"
|
||||
textAlign="left"
|
||||
fontSize={"x-small"}
|
||||
fontWeight={600}
|
||||
>
|
||||
Switch Accounts
|
||||
</Text>
|
||||
{users.map((val) => {
|
||||
@@ -168,34 +386,34 @@ const HeaderMain = ({
|
||||
// key={val.id}
|
||||
// w="100%"
|
||||
// >
|
||||
<HStack
|
||||
alignItems="flex-start"
|
||||
gap={4}
|
||||
w="100%"
|
||||
className="pointer link"
|
||||
<HStack
|
||||
alignItems="flex-start"
|
||||
gap={4}
|
||||
w="100%"
|
||||
className="pointer link"
|
||||
>
|
||||
<Image
|
||||
src={womenpfp}
|
||||
h="31.79px"
|
||||
alt="Profile Picture"
|
||||
/>
|
||||
<Text
|
||||
as={"span"}
|
||||
fontSize="x-small"
|
||||
fontWeight={600}
|
||||
color="#191D23"
|
||||
>
|
||||
<Image
|
||||
src={womenpfp}
|
||||
h="31.79px"
|
||||
alt="Profile Picture"
|
||||
/>
|
||||
{val.user}
|
||||
<Text
|
||||
as={"span"}
|
||||
// as={"span"}
|
||||
fontSize="x-small"
|
||||
fontWeight={600}
|
||||
color="#191D23"
|
||||
color="#A0ABBB"
|
||||
>
|
||||
{val.user}
|
||||
<Text
|
||||
// as={"span"}
|
||||
fontSize="x-small"
|
||||
fontWeight={600}
|
||||
color="#A0ABBB"
|
||||
>
|
||||
{val.role}
|
||||
</Text>
|
||||
{val.role}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Text>
|
||||
</HStack>
|
||||
// </VStack>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user