76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import {
|
|
Button,
|
|
Avatar,
|
|
Typography,
|
|
Dropdown,
|
|
Label,
|
|
Separator,
|
|
Spinner,
|
|
} from "@heroui/react";
|
|
import { useState, type PropsWithChildren } from "react";
|
|
import { useAuth } from "~/hooks/auth";
|
|
import { Settings } from "./settings";
|
|
|
|
export default function User({ children }: PropsWithChildren) {
|
|
const { user, loading, login, logout } = useAuth();
|
|
const [showSettings, setShowSettings] = useState(false);
|
|
|
|
const toggleSettings = () => {setShowSettings(true)}
|
|
|
|
if (loading) {
|
|
return (
|
|
<Button isPending={true}>
|
|
<Spinner color="current" size="md" />
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
if (user === null) {
|
|
return (
|
|
<Button onClick={() => login()}>
|
|
<Typography.Paragraph>{children}Login</Typography.Paragraph>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Settings show={showSettings} setShow={setShowSettings}/>
|
|
<Dropdown>
|
|
<Button className="pr-0">
|
|
{children}
|
|
<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, toggleSettings)}
|
|
>
|
|
<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>, toggleSettings: () => void) {
|
|
if (key === "settings") {
|
|
toggleSettings();
|
|
} else {
|
|
logout();
|
|
}
|
|
}
|