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 { Avatar, Skeleton } from "antd";
import Image from "next/image" import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from "@ant-design/icons";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => { export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => {
const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div
const [isGridViewOpen, setIsGridViewOpen] = useState(false); const [isGridViewOpen, setIsGridViewOpen] = useState(false);
// Function to toggle the dropdown visibility const [isopen, setisopen] = useState(false);
const toggleGridViewDropdown = () => { // Function to toggle the dropdown visibility
setIsGridViewOpen(!isGridViewOpen); // Toggle the state const toggleGridViewDropdown = () => {
}; if (isopen) {
setIsGridViewOpen(false);
setisopen(false);
}
if (!isopen) {
setisopen(true);
setIsGridViewOpen(true);
}
// Toggle the state
};
// Function to handle click outside // Function to handle click outside
const handleClickOutside = event => { const handleClickOutside = event => {
if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) { if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
setIsGridViewOpen(false); // Close if clicked outside // 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(() => { const router = useRouter();
document.addEventListener("mousedown", handleClickOutside); const VenderDetails = () => {
return () => { return (
document.removeEventListener("mousedown", handleClickOutside); <div>
}; {!venderBusiness && !venderEmail ? (
}, []); <div className="d-flex align-items-center gap-2">
const router = useRouter(); <Skeleton.Image active style={{ height: 50, width: 70 }} />
const VenderDetails = () => { <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
return <div> </div>
{!venderBusiness && !venderEmail ? ) : (
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-3">
<Skeleton.Image active style={{ height: 50, width: 70 }} /> <Image src={businessLogo} height={50} width={70} objectFit="contain" />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} /> <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>
: </div>
<div className="d-flex align-items-center gap-3"> <div className="inner">
<Image src={businessLogo} height={50} width={70} objectFit="contain" /> <div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="d-flex flex-column"> <div className="link">
<p className="m-0">{venderBusiness}</p> <a href="">Add Activity</a>
<p className="m-0">{venderEmail}</p>
</div>
</div> </div>
} </div>
</div> <div className="inner">
} <div className="disc">Your Account is been verified you can start adding activities now.</div>
const AdminDetails = () => { <div className="link">
return <div> <a href="">Add Activity</a>
{!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>
: </div>
<div className="d-flex align-items-center gap-3"> <div className="inner">
<Avatar icon={<UserOutlined />} active size={40} /> <div className="disc">Your Account is been verified you can start adding activities now.</div>
<div className="d-flex flex-column"> <div className="link">
<p className="m-0">{adminName}</p> <a href="">Add Activity</a>
<p className="m-0">{adminEmail}</p>
</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">
return ( <a href="">Add Activity</a>
<div </div>
className="bg-light px-5 d-flex align-items-center justify-content-between w-100" </div>
style={{ <div className="inner">
height: 80, <div className="disc">Your Account is been verified you can start adding activities now.</div>
boxshadow: '0px 1px 9px -3px rgba(0,0,0,0.56)', <div className="link">
'-webkit-box-shadow': '0px 1px 9px -3px rgba(0,0,0,0.56)', <a href="">Add Activity</a>
'-moz-box-shadow': '0px 4px 1px -3px rgba(0,0,0,0.56)' </div>
}} </div>
> <div className="inner">
<div className="disc">Your Account is been verified you can start adding activities now.</div>
<Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" /> <div className="link">
<div className="d-flex align-items-center gap-5"> <a href="">Add Activity</a>
<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>
{isRoute === 'vendor' && <VenderDetails />} </div>
{isRoute === 'admin' && <AdminDetails />} <div className="inner">
<button <div className="disc">Your Account is been verified you can start adding activities now.</div>
className="btn btn-primary rounded-pill" <div className="link">
style={{ height: 40 }} <a href="">Add Activity</a>
onClick={async () => { </div>
signOut({ redirect: false }); </div>
await router.push("/");
window.location.reload();
}}
>
Logout
</button>
</div> </div>
</div>
</div> </div>
)
}
\ No newline at end of file \ 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!