Added user authentication

app/components/header.tsx

@@ -3,6 +3,7 @@ import { Tabs } from "@heroui/react";
 import { Button } from "@heroui/react";
 import { useNavigate, useLocation } from "react-router";
 import porning from "../images/porning.svg";
+import User from "./user";
 
 export function Header() {
     const location = useLocation();
@@ -42,7 +43,7 @@ export function Header() {
                 <div className="absolute flex left-1/2 -translate-x-1/2">
                 <img className="h-12" src={porning} alt="Porning logo" />
                 </div>
-               <Button>Login</Button>
+            <User />
             </Surface>
         </div>
     );

app/components/user.tsx

@@ -0,0 +1,40 @@
+import { Button, Avatar, Typography, Dropdown, Label, Separator } from "@heroui/react";
+import { useAuth } from "~/hooks/auth";
+
+export default function User() {
+    const {user, login, logout} = useAuth();
+
+    if (user === null) {
+        return <Button onClick={() => login()}>Login</Button>;
+    }
+
+    return (
+        <Dropdown>
+        <Button className="pr-0">
+            <Typography.Paragraph>{user.name}</Typography.Paragraph>
+            <Avatar>
+                <Avatar.Image alt="Avatar" src={user.avatar}></Avatar.Image>
+            </Avatar>
+        </Button>
+        <Dropdown.Popover >
+            <Dropdown.Menu onAction={(key) => handleAction(String(key), logout)}>
+                <Dropdown.Item id="settings" textValue="Settings">
+                    <Label>Settings</Label>
+                </Dropdown.Item>
+                <Separator variant="tertiary"/>
+                <Dropdown.Item id="logout" textValue="Logout" variant="danger">
+                    <Label>Logout</Label>
+                </Dropdown.Item>
+            </Dropdown.Menu>
+        </Dropdown.Popover>
+        </Dropdown>
+    );
+}
+
+function handleAction(key: string, logout: () => Promise<void>) {
+    if (key === "settings") {
+        console.log("settings");
+    } else {
+        logout();
+    }
+}