70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { ClipboardList, LogIn, LogOut, UserRound } from "lucide-react";
|
|
import type { AuthUser } from "@duoc-thu/shared-types";
|
|
import { logout, me } from "@duoc-thu/api-client";
|
|
|
|
/** Public — visible on every page, not just `/admin`. Chat itself never
|
|
* requires this: an anonymous visitor keeps working exactly as before
|
|
* regardless of what this renders. Optional login exists here so `demo`
|
|
* (the logged-in "bác sĩ" persona) can sign in from the normal chat UI. */
|
|
export function AccountMenu() {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState<AuthUser | null>(null);
|
|
const [loaded, setLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
me()
|
|
.then(setUser)
|
|
.finally(() => setLoaded(true));
|
|
}, []);
|
|
|
|
if (!loaded) return null;
|
|
|
|
if (!user) {
|
|
return (
|
|
<Link
|
|
href="/login"
|
|
className="flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-txt-secondary hover:bg-surface-hover"
|
|
>
|
|
<LogIn className="h-3.5 w-3.5" />
|
|
<span>Đăng nhập</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-txt-secondary">
|
|
<UserRound className="h-3.5 w-3.5" />
|
|
<span>{user.username}</span>
|
|
<button
|
|
aria-label="Đăng xuất"
|
|
onClick={async () => {
|
|
await logout();
|
|
setUser(null);
|
|
router.refresh();
|
|
}}
|
|
className="ml-1 text-txt-muted hover:text-txt-primary"
|
|
>
|
|
<LogOut className="h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
{/* A real, labeled button — not a tooltip hidden on plain text (that
|
|
* shipped invisible: an owner testing the feature live couldn't find
|
|
* it at all). Same destination as before, `/profile`. */}
|
|
<Link
|
|
href="/profile"
|
|
title="Hồ sơ bệnh nhân"
|
|
className="flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3 py-1.5 text-xs font-semibold text-txt-secondary hover:bg-surface-hover"
|
|
>
|
|
<ClipboardList className="h-3.5 w-3.5" />
|
|
<span>Hồ sơ bệnh nhân</span>
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|