this repo has no description
Clicking User Icon now shows option to log in
+44
-11
+31
app/components/Header/components/User.tsx
+31
app/components/Header/components/User.tsx
···
1
+
"use client";
2
+
3
+
import Link from "next/link";
4
+
import { useState } from "react";
5
+
import { RxAvatar } from "react-icons/rx";
6
+
7
+
const User = () => {
8
+
const [showSettings, setShowSettings] = useState(false);
9
+
10
+
return (
11
+
<div className="flex-1">
12
+
<RxAvatar
13
+
className="hover:cursor-pointer text-[#FF6A00]"
14
+
onClick={() => setShowSettings((s) => !s)}
15
+
size={48}
16
+
/>
17
+
{showSettings && (
18
+
<div className="absolute bg-[#30255C] flex h-24 items-center justify-center mt-2 right-0 rounded-lg top-full w-full">
19
+
<Link
20
+
className="hover:underline text-xl"
21
+
href="/login"
22
+
>
23
+
Log In
24
+
</Link>
25
+
</div>
26
+
)}
27
+
</div>
28
+
);
29
+
};
30
+
31
+
export default User;
+1
-1
app/components/Header/components/Weather.tsx
+1
-1
app/components/Header/components/Weather.tsx
+6
-9
app/components/Header/index.tsx
+6
-9
app/components/Header/index.tsx
···
1
-
import { RxAvatar } from "react-icons/rx";
2
1
import { DateTime } from "luxon";
2
+
import User from "./components/User";
3
3
import Weather from "./components/Weather";
4
4
5
5
const Header = () => {
6
6
return (
7
-
<div className="bg-[#30255C] flex p-2">
8
-
<div className="flex flex-col flex-1 gap-2 justify-center h-full w-full">
7
+
<div className="flex p-2 justify-between">
8
+
<div className="bg-[#30255C] flex flex-col gap-2 justify-center px-4 rounded-lg">
9
9
<h1 className="semibold text-3xl w-fit">Bmore Today</h1>
10
10
<h2 className="text-lg">Go Outside and B(e)More</h2>
11
11
</div>
12
-
<div className="flex gap-2 items-center">
13
-
<div>
12
+
<div className="flex gap-2 items-center relative">
13
+
<div className="bg-[#30255C] flex flex-col h-full items-center justify-center px-4 rounded-lg">
14
14
<p>{DateTime.now().toLocaleString(DateTime.DATE_HUGE)}</p>
15
15
<Weather />
16
16
</div>
17
-
<RxAvatar
18
-
className="hover:cursor-pointer text-[#FF6A00]"
19
-
size={48}
20
-
/>
17
+
<User />
21
18
</div>
22
19
</div>
23
20
);
+5
app/login/page.tsx
+5
app/login/page.tsx