121 lines
3.4 KiB
JavaScript
121 lines
3.4 KiB
JavaScript
import { AddIcon, ArrowBackIcon } from "@chakra-ui/icons";
|
|
import {
|
|
Avatar,
|
|
Box,
|
|
Button,
|
|
HStack,
|
|
Popover,
|
|
PopoverArrow,
|
|
PopoverBody,
|
|
PopoverContent,
|
|
PopoverFooter,
|
|
PopoverTrigger,
|
|
Portal,
|
|
Text,
|
|
useColorMode,
|
|
} from "@chakra-ui/react";
|
|
import React, { useContext } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { IoMdDownload } from "react-icons/io";
|
|
import * as XLSX from "xlsx";
|
|
import profile from "../assets/proavatar.webp";
|
|
import GlobalStateContext from "../Contexts/GlobalStateContext";
|
|
import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
|
|
import logoMini from "../assets/propic.png";
|
|
import { BsBack } from "react-icons/bs";
|
|
|
|
const HeaderMain = ({
|
|
link,
|
|
btnTitle,
|
|
title,
|
|
icon,
|
|
logOutHandler,
|
|
slideDirecttion,
|
|
data,
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
|
|
|
|
return (
|
|
<Box
|
|
className={` pt-2 pb-2 fw-400 border-bottom d-flex ${
|
|
slideDirecttion ? "flex-row-reverse ps-2" : ""
|
|
} justify-content-between align-items-center`}
|
|
// boxShadow={"0 0px 8px rgba(0, 0, 0, 0.2)"}
|
|
|
|
zIndex={999}
|
|
>
|
|
<HStack>
|
|
{/* <ArrowBackIcon onClick={()=>navigate(-1)} /> */}
|
|
<Text
|
|
as={"span"}
|
|
fontWeight={"500"}
|
|
// color={"forestGreen.500"}
|
|
className="fs-6 "
|
|
>
|
|
{/* <icon /> */}
|
|
{title}
|
|
</Text>
|
|
</HStack>
|
|
|
|
<Box me={4} gap={2} className="d-flex justify-content-center ">
|
|
<Popover placement="bottom">
|
|
<Portal>
|
|
<PopoverContent maxW="200px" className="">
|
|
<PopoverArrow />
|
|
<PopoverBody onClick={()=> navigate('/profile')} className="web-text-medium pointer link">
|
|
Profile
|
|
</PopoverBody>
|
|
<Link to={"/help-and-support"}>
|
|
<PopoverBody className="web-text-medium pointer ">
|
|
Help & Support
|
|
</PopoverBody>
|
|
</Link>
|
|
<PopoverFooter
|
|
onClick={logOutHandler}
|
|
className="web-text-medium pointer link"
|
|
>
|
|
Log Out
|
|
</PopoverFooter>
|
|
</PopoverContent>
|
|
</Portal>
|
|
<PopoverTrigger>
|
|
<Box
|
|
// onClick={logOutHandler}
|
|
className="d-flex pointer align-items-center"
|
|
>
|
|
<Avatar
|
|
size="sm"
|
|
boxSize={37}
|
|
name="Tanami M"
|
|
src={logoMini}
|
|
bg={"green.100"}
|
|
// p={1}
|
|
/>
|
|
<Box
|
|
style={{
|
|
display: "flex",
|
|
}}
|
|
className=" overflow-hidden ms-3 flex-column "
|
|
>
|
|
<Text as={"span"} className="web-text-small">
|
|
Hello, {data?.data?.firstName} {data?.data?.lastName}
|
|
</Text>
|
|
<Text as={"span"} className="web-text-xsmall">
|
|
{data?.data?.emailAddress}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</PopoverTrigger>
|
|
</Popover>
|
|
|
|
{/* <Box onClick={() => toggleColorMode()} as="span" p={2} rounded={'lg'} className="link pointer">
|
|
{colorMode === "light"? <MdOutlineDarkMode /> :<MdOutlineLightMode />}
|
|
</Box> */}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default HeaderMain;
|