GenericHeader.js
5.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import { Avatar, Skeleton } from "antd";
import Image from "next/image"
import { useRouter } from "next/router";
import { signOut } from "next-auth/react";
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
};
// Function to handle click outside
const handleClickOutside = event => {
if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
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);
};
}, []);
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">
<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>
{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>
)
}