Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit c7499a51 by jaymehta
Options

.

1 parent 09260aab
Inline Side-by-side
Showing 1 changed file with 154 additions and 107 deletions
components/layout/Generics/GenericHeader.js
import { Avatar, Skeleton } from "antd";
import Image from "next/image"
import Image from "next/image";
import { useRouter } from "next/router";
import { signOut } from "next-auth/react";
import { UserOutlined } from '@ant-design/icons';
import { UserOutlined } from "@ant-design/icons";
import { ToastContainer } from "react-toastify";
import { useEffect, useRef, useState } from "react";
export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => {
const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
// Function to toggle the dropdown visibility
const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen); // Toggle the state
};
const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isopen, setisopen] = useState(false);
// Function to toggle the dropdown visibility
const toggleGridViewDropdown = () => {
if (isopen) {
setIsGridViewOpen(false);
setisopen(false);
}
if (!isopen) {
setisopen(true);
setIsGridViewOpen(true);
}
// Toggle the state
};
// Function to handle click outside
const handleClickOutside = event => {
if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
setIsGridViewOpen(false); // Close if clicked outside
}
// Function to handle click outside
const handleClickOutside = event => {
if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
// setTimeout(() => {
// setisopen(false);
// }, 500);
setIsGridViewOpen(false); // Close if clicked outside
}
};
// Effect to add click event listener when component mounts
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
// Effect to add click event listener when component mounts
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const router = useRouter();
const VenderDetails = () => {
return <div>
{!venderBusiness && !venderEmail ?
<div className="d-flex align-items-center gap-2">
<Skeleton.Image active style={{ height: 50, width: 70 }} />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
}, []);
const router = useRouter();
const VenderDetails = () => {
return (
<div>
{!venderBusiness && !venderEmail ? (
<div className="d-flex align-items-center gap-2">
<Skeleton.Image active style={{ height: 50, width: 70 }} />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
</div>
) : (
<div className="d-flex align-items-center gap-3">
<Image src={businessLogo} height={50} width={70} objectFit="contain" />
<div className="d-flex flex-column">
<p className="m-0">{venderBusiness}</p>
<p className="m-0">{venderEmail}</p>
</div>
</div>
)}
</div>
);
};
const AdminDetails = () => {
return (
<div>
{!adminName && !adminEmail ? (
<div className="d-flex align-items-center gap-2">
<Skeleton.Avatar active size={40} />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
</div>
) : (
<div className="d-flex align-items-center gap-3">
<Avatar icon={<UserOutlined />} active size={40} />
<div className="d-flex flex-column">
<p className="m-0">{adminName}</p>
<p className="m-0">{adminEmail}</p>
</div>
</div>
)}
</div>
);
};
return (
<div
className="bg-light px-5 d-flex align-items-center justify-content-between w-100"
style={{
height: 80,
boxshadow: "0px 1px 9px -3px rgba(0,0,0,0.56)",
"-webkit-box-shadow": "0px 1px 9px -3px rgba(0,0,0,0.56)",
"-moz-box-shadow": "0px 4px 1px -3px rgba(0,0,0,0.56)"
}}
>
<Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" />
<div className="d-flex align-items-center gap-5">
<div className="notification-row top-btn">
<div onClick={toggleGridViewDropdown}>
<img src="/images/icons/notification.svg" alt="" />
</div>
<div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="notification-inner">
<div className="head">Notifications</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
:
<div className="d-flex align-items-center gap-3">
<Image src={businessLogo} height={50} width={70} objectFit="contain" />
<div className="d-flex flex-column">
<p className="m-0">{venderBusiness}</p>
<p className="m-0">{venderEmail}</p>
</div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
}
</div>
}
const AdminDetails = () => {
return <div>
{!adminName && !adminEmail ?
<div className="d-flex align-items-center gap-2">
<Skeleton.Avatar active size={40} />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
:
<div className="d-flex align-items-center gap-3">
<Avatar icon={<UserOutlined />} active size={40} />
<div className="d-flex flex-column">
<p className="m-0">{adminName}</p>
<p className="m-0">{adminEmail}</p>
</div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
}
</div>
}
return (
<div
className="bg-light px-5 d-flex align-items-center justify-content-between w-100"
style={{
height: 80,
boxshadow: '0px 1px 9px -3px rgba(0,0,0,0.56)',
'-webkit-box-shadow': '0px 1px 9px -3px rgba(0,0,0,0.56)',
'-moz-box-shadow': '0px 4px 1px -3px rgba(0,0,0,0.56)'
}}
>
<Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" />
<div className="d-flex align-items-center gap-5">
<div className="notification-row top-btn">
<a onClick={toggleGridViewDropdown}>
<img src="/images/icons/notification.svg" alt="" />
</a>
<div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="notification-inner">
<div className="head">Notifications</div>
<div className="inner">
<div className="disc">Your Account is been verified you
can start adding activities now.</div>
<div className="link"><a href="">Add Activity</a></div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you
can start adding activities now.</div>
<div className="link"><a href="">Add Activity</a></div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you
can start adding activities now.</div>
<div className="link"><a href="">Add Activity</a></div>
</div>
</div>
</div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
{isRoute === 'vendor' && <VenderDetails />}
{isRoute === 'admin' && <AdminDetails />}
<button
className="btn btn-primary rounded-pill"
style={{ height: 40 }}
onClick={async () => {
signOut({ redirect: false });
await router.push("/");
window.location.reload();
}}
>
Logout
</button>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="link">
<a href="">Add Activity</a>
</div>
</div>
</div>
</div>
</div>
)
}
\ No newline at end of file
{isRoute === "vendor" && <VenderDetails />}
{isRoute === "admin" && <AdminDetails />}
<button
className="btn btn-primary rounded-pill"
style={{ height: 40 }}
onClick={async () => {
signOut({ redirect: false });
await router.push("/");
window.location.reload();
}}
>
Logout
</button>
</div>
</div>
);
};
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!