52 lines
2.8 KiB
TypeScript
52 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { ChevronDownIcon, SettingsIcon, UserRoundIcon, MessageCircle } from "lucide-react";
|
|
import { authClient } from "@/lib/auth/client";
|
|
import { safeAuthReturnPath } from "@/lib/auth/return-path";
|
|
import { SignOutButton } from "@/components/auth/sign-out-button";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu, DropdownMenuContent, DropdownMenuGroup,
|
|
DropdownMenuItem, DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Separator } from "@/components/ui/separator"
|
|
|
|
export function PublicAccountMenu() {
|
|
const pathname = usePathname();
|
|
const { data, isPending } = authClient.useSession();
|
|
const [openedPath, setOpenedPath] = useState<string | null>(null);
|
|
const returnPath = safeAuthReturnPath(openedPath ?? pathname);
|
|
const suffix = returnPath === "/" ? "" : `?next=${encodeURIComponent(returnPath)}`;
|
|
const accountLabel = data?.user ? data.user.name.trim() || "โปรไฟล์" : "บัญชี";
|
|
|
|
return <DropdownMenu onOpenChange={(open) => {
|
|
if (open) setOpenedPath(window.location.pathname + window.location.search + window.location.hash);
|
|
}}>
|
|
<DropdownMenuTrigger render={<Button variant="link" size="sm" className="text-foreground" disabled={isPending} aria-label={data?.user ? `บัญชีของ ${accountLabel}` : "บัญชี"} />}>
|
|
<Avatar size="sm" aria-hidden="true">
|
|
{data?.user?.image && <AvatarImage src={data.user.image} alt="" />}
|
|
<AvatarFallback><UserRoundIcon className="size-4" /></AvatarFallback>
|
|
</Avatar>
|
|
<span className="max-w-24 truncate sm:max-w-40" title={accountLabel}>{accountLabel}</span>
|
|
<ChevronDownIcon data-icon="inline-end" aria-hidden="true" className="transition-transform group-aria-expanded/button:rotate-180" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuGroup>
|
|
{data?.user ? <>
|
|
<DropdownMenuItem render={<Link href="/profile" />}><SettingsIcon aria-hidden="true" />ตั้งค่าบัญชี</DropdownMenuItem>
|
|
<DropdownMenuItem render={<Link href="/commission/tickets" />}><MessageCircle aria-hidden="true" />คำขอของฉัน</DropdownMenuItem>
|
|
<Separator />
|
|
<SignOutButton menuItem />
|
|
</> : <>
|
|
<DropdownMenuItem render={<Link href={`/auth/login${suffix}`} />}>เข้าสู่ระบบ</DropdownMenuItem>
|
|
<DropdownMenuItem render={<Link href={`/auth/register${suffix}`} />}>สมัครสมาชิก</DropdownMenuItem>
|
|
</>}
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>;
|
|
}
|