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 80 additions and 33 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);
const [isopen, setisopen] = useState(false);
// Function to toggle the dropdown visibility // Function to toggle the dropdown visibility
const toggleGridViewDropdown = () => { const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen); // Toggle the state 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)) {
// setTimeout(() => {
// setisopen(false);
// }, 500);
setIsGridViewOpen(false); // Close if clicked outside setIsGridViewOpen(false); // Close if clicked outside
} }
}; };
...@@ -28,13 +40,14 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -28,13 +40,14 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
}, []); }, []);
const router = useRouter(); const router = useRouter();
const VenderDetails = () => { const VenderDetails = () => {
return <div> return (
{!venderBusiness && !venderEmail ? <div>
{!venderBusiness && !venderEmail ? (
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-2">
<Skeleton.Image active style={{ height: 50, width: 70 }} /> <Skeleton.Image active style={{ height: 50, width: 70 }} />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} /> <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
</div> </div>
: ) : (
<div className="d-flex align-items-center gap-3"> <div className="d-flex align-items-center gap-3">
<Image src={businessLogo} height={50} width={70} objectFit="contain" /> <Image src={businessLogo} height={50} width={70} objectFit="contain" />
<div className="d-flex flex-column"> <div className="d-flex flex-column">
...@@ -42,17 +55,19 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -42,17 +55,19 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
<p className="m-0">{venderEmail}</p> <p className="m-0">{venderEmail}</p>
</div> </div>
</div> </div>
} )}
</div> </div>
} );
};
const AdminDetails = () => { const AdminDetails = () => {
return <div> return (
{!adminName && !adminEmail ? <div>
{!adminName && !adminEmail ? (
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-2">
<Skeleton.Avatar active size={40} /> <Skeleton.Avatar active size={40} />
<Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} /> <Skeleton.Button active style={{ height: 40, width: 190 }} shape={"rounded"} />
</div> </div>
: ) : (
<div className="d-flex align-items-center gap-3"> <div className="d-flex align-items-center gap-3">
<Avatar icon={<UserOutlined />} active size={40} /> <Avatar icon={<UserOutlined />} active size={40} />
<div className="d-flex flex-column"> <div className="d-flex flex-column">
...@@ -60,51 +75,83 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -60,51 +75,83 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
<p className="m-0">{adminEmail}</p> <p className="m-0">{adminEmail}</p>
</div> </div>
</div> </div>
} )}
</div> </div>
} );
};
return ( return (
<div <div
className="bg-light px-5 d-flex align-items-center justify-content-between w-100" className="bg-light px-5 d-flex align-items-center justify-content-between w-100"
style={{ style={{
height: 80, height: 80,
boxshadow: '0px 1px 9px -3px rgba(0,0,0,0.56)', boxshadow: "0px 1px 9px -3px rgba(0,0,0,0.56)",
'-webkit-box-shadow': '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)' "-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" /> <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="d-flex align-items-center gap-5">
<div className="notification-row top-btn"> <div className="notification-row top-btn">
<a onClick={toggleGridViewDropdown}> <div onClick={toggleGridViewDropdown}>
<img src="/images/icons/notification.svg" alt="" /> <img src="/images/icons/notification.svg" alt="" />
</a> </div>
<div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}> <div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="notification-inner"> <div className="notification-inner">
<div className="head">Notifications</div> <div className="head">Notifications</div>
<div className="inner"> <div className="inner">
<div className="disc">Your Account is been verified you <div className="disc">Your Account is been verified you can start adding activities now.</div>
can start adding activities now.</div> <div className="link">
<div className="link"><a href="">Add Activity</a></div> <a href="">Add Activity</a>
</div>
</div> </div>
<div className="inner"> <div className="inner">
<div className="disc">Your Account is been verified you <div className="disc">Your Account is been verified you can start adding activities now.</div>
can start adding activities now.</div> <div className="link">
<div className="link"><a href="">Add Activity</a></div> <a href="">Add Activity</a>
</div>
</div> </div>
<div className="inner"> <div className="inner">
<div className="disc">Your Account is been verified you <div className="disc">Your Account is been verified you can start adding activities now.</div>
can start adding activities now.</div> <div className="link">
<div className="link"><a href="">Add Activity</a></div> <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 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> </div>
</div> </div>
{isRoute === 'vendor' && <VenderDetails />} {isRoute === "vendor" && <VenderDetails />}
{isRoute === 'admin' && <AdminDetails />} {isRoute === "admin" && <AdminDetails />}
<button <button
className="btn btn-primary rounded-pill" className="btn btn-primary rounded-pill"
style={{ height: 40 }} style={{ height: 40 }}
...@@ -118,5 +165,5 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -118,5 +165,5 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
</button> </button>
</div> </div>
</div> </div>
)
}
\ No newline at end of file \ No newline at end of file
);
};
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!