-
-
Notifications
You must be signed in to change notification settings - Fork 72
/
Header.js
114 lines (107 loc) · 3.6 KB
/
Header.js
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
import React, { useState } from "react";
// material design
import { Button } from "@material-ui/core";
// link from next
import Link from "next/link";
import Menu from "@material-ui/core/Menu";
import { auth } from "../utils/firebase";
import toast from "react-hot-toast";
const Header = ({ setOpen, user, setUser }) => {
const [anchorEl, setAnchorEl] = useState(null);
const signOut = () => {
auth()
.signOut()
.then(() => {
setUser(null);
toast.success("Signed Out from Codehouse!");
})
.catch((error) => {
// An error happened.
console.log(error);
});
setAnchorEl(null);
};
return (
<div className="w-full px-4 py-3 glassmorphism flex justify-between items-center">
<Link href="/">
<a className="text-3xl font-extrabold text-[#ECF2F5] change-span-color-onhover">
Code House
<span className="text-[#ffcf5e] text-5xl duration-500 leading-3">
.
</span>
</a>
</Link>
<div className="flex h-full items-center">
<a href="#" className="text-sm font-medium continuous-line">
How it works
</a>
<a href="#" className="text-sm font-medium ml-6 continuous-line">
Upcoming Features
</a>
<a href="#" className="text-sm font-medium ml-6 continuous-line">
Contributors
</a>
<a href="#" className="text-sm font-medium ml-6 continuous-line">
On Review
</a>
<Button className="!p-0 !w-auto !h-auto !m-auto shine !ml-6">
<div className="border-2 border-[#ffcf5e] text-[#ffcf5e] px-2 py-[4px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
New CheetSheet
</div>
</Button>
{user ? (
<>
<Button
className="!p-0 !w-auto !h-auto !m-auto !ml-2"
onClick={(e) => setAnchorEl(e.currentTarget)}
>
<div className="bg-[#F5BA31] p-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
<img
src="https://avatars.githubusercontent.com/u/61895712?v=4"
alt=""
className="h-7 w-7 rounded-md mr-1"
/>
Savio Martin
</div>
</Button>
<Menu
getContentAnchorEl={null}
className="!mt-1"
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
>
<Button
className="!p-0 !w-auto !h-auto !m-auto"
onClick={signOut}
>
<div className="px-4 py-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center hover:text-red-500 duration-500">
Sign Out
</div>
</Button>
</Menu>
</>
) : (
<Button
className="!p-0 !w-auto !h-auto !m-auto shine !ml-2"
onClick={() => setOpen(true)}
>
<div className="bg-[#F5BA31] px-4 py-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
Sign In
</div>
</Button>
)}
</div>
</div>
);
};
export default Header;