optifii-admin/src/Components/HeaderMain.jsx

import React, { useContext, useState } from "react";
import {
  Avatar,
  Box,
  Button,
  HStack,
  Image,
  Input,
  InputGroup,
  InputLeftElement,
  Popover,
  PopoverArrow,
  PopoverBody,
  PopoverContent,
  PopoverTrigger,
  Portal,
  Text,
  useDisclosure,
} from "@chakra-ui/react";
import { NavLink } from 'react-router-dom';
import { MdOutlineHeadsetMic, MdNotificationsNone } from "react-icons/md";
import { RiWallet3Line } from "react-icons/ri";
import { SearchIcon, ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
import { Link, useNavigate } from "react-router-dom";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import mainLogo from "../assets/optifii_white.svg";
import PrimaryButton from "./Buttons/PrimaryButton";
// import Notifications from "../Pages/Notifications/Notifications";

const HeaderMain = ({
  logOutHandler,
  slideDirecttion,
  isDrawerOpen,
  toggleDrawer,
}) => {
  const navigate = useNavigate();
  const { image } = useContext(GlobalStateContext);
  const [searchTerm, setSearchTerm] = useState("");

  // For controlling the modal
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <Box
      w={"100%"}
      h={{ base: "8%", xl: "6%" }}
      position={"relative"}
      className={`pt-2 pb-2 fw-400  d-flex ${
        slideDirecttion ? "ps-2" : ""
      } justify-content-between align-items-center`}
      zIndex={999}
      // bgGradient="linear(to-r, #1A0436, #6311CB)" // Linear gradient
    bgGradient="linear(to-r, #1A0436, #5E0FCD)"
      color={"#fff"}
      sha
    >
      <Box display={"flex"} alignItems={"center"}>
        <Box
          w={"230px"}
          display={"flex"}
          alignItems={"center"}
          justifyContent={"space-between"}
        >
          <Box className={`d-flex ${true ? "justify-content-start" : "justify-content-center"} p-4 pt-0 pb-0 position-relative`}>
            <Image
              style={{ width: 100 }}
              src={mainLogo}
              alt="Logo"
              onClick={() => navigate("/home")}
              cursor={"pointer"}
            />
          </Box>
          <Button
            colorScheme={"white"}
            rounded={"lg"}
            onClick={toggleDrawer}
            style={{ width: "28px", height: "28px", minWidth: "28px", zIndex: 99, backgroundColor: "#ffffff29" }}
          >
            {isDrawerOpen ? <ArrowLeftIcon className="web-text-small" color={"#fff"} /> : <ArrowRightIcon className="web-text-small" color={"#fff"} />}
          </Button>
        </Box>

        <InputGroup width={350} size="sm" ml={5}>
          <InputLeftElement pointerEvents="none">
            <SearchIcon color="gray.100" />
          </InputLeftElement>
          <Input
            type="search"
            placeholder="Type to search..."
            rounded="md"
            bg={'purple.800'}
            border={'none'}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </InputGroup>
      </Box>
      <Box display={"flex"} justifyContent={"space-between"}>
        <Box display={"flex"} gap={2}>
          <Box me={4} gap={2} className="d-flex justify-content-center">
            <Popover placement="bottom-start">
              <Portal>
                <PopoverContent mt={6} maxW="450px">
                  <PopoverArrow />
                  <PopoverBody
                    py={6}
                    gap={2}
                    display={"flex"}
                    justifyContent={"center"}
                    flexDirection={"column"}
                    alignItems={"center"}
                  >
                    <Avatar size="2xl" name="Segun Adebayo" src={image} />
                    <Text as={"span"} fontSize={"md"} fontWeight={600}>
                      Kartikey Gautam
                    </Text>
                    <PrimaryButton onClick={() => navigate("/profile")} title={"View Profile"} />
                  </PopoverBody>
                </PopoverContent>
              </Portal>

              <PopoverTrigger>
                <Box className="d-flex pointer align-items-center">
                  <Avatar src={image} size={"sm"} />
                  <Box style={{ display: "flex" }} className="overflow-hidden ms-3 flex-column">
                    <Text fontWeight={600} as={"span"} fontSize={"md"}>
                      Kartikey Gautam
                    </Text>
                    <Text as={"span"} fontSize={"xs"}>
                      Website Development India
                    </Text>
                  </Box>
                </Box>
              </PopoverTrigger>
            </Popover>
          </Box>
        </Box>
      </Box>

      {/* Include the Notifications modal */}
      {/* <Notifications isOpen={isOpen} onClose={onClose} /> */}
    </Box>
  );
};

export default HeaderMain;