59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { useAuth } from '../lib/auth/hooks'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/primitives/dropdown-menu'
|
|
|
|
function getInitials(name: string): string {
|
|
return name
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.toUpperCase()
|
|
.slice(0, 2)
|
|
}
|
|
|
|
/**
|
|
* ProfileDropdown - User profile menu with sign out
|
|
*/
|
|
export function ProfileDropdown() {
|
|
const { user, signOut } = useAuth()
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut()
|
|
// TODO: Show sign-in dialog or redirect
|
|
console.log('Signed out')
|
|
}
|
|
|
|
const initials = user?.name ? getInitials(user.name) : user?.email?.[0]?.toUpperCase() || 'U'
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-background/95 font-medium text-sm shadow-lg backdrop-blur-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none"
|
|
type="button"
|
|
>
|
|
{initials}
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
{user?.name && (
|
|
<div className="px-2 py-1.5 text-sm">
|
|
<div className="font-medium">{user.name}</div>
|
|
{user.email && <div className="text-muted-foreground text-xs">{user.email}</div>}
|
|
</div>
|
|
)}
|
|
{user?.name && <DropdownMenuItem className="h-px bg-border" />}
|
|
<DropdownMenuItem className="cursor-pointer" variant="destructive" onClick={handleSignOut}>
|
|
Sign out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|