user-nav.tsx

"use client"

import { User } from "next-auth"
import { signOut } from "next-auth/react"

import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { UserAvatar } from "@/components/user-avatar"

type UserUsername = string | null | undefined

interface UserAccountNavProps extends React.HTMLAttributes<HTMLDivElement> {
    user: Pick<User & { username: UserUsername }, "name" | "image" | "username">
}

export function UserAccountDropdown({ user }: UserAccountNavProps) {
    return (
        <DropdownMenu>
            <DropdownMenuTrigger className="rounded-full">
                <UserAvatar
                    user={{ username: user.username ? user.username : "", image: user.image || null }}
                    className="h-8 w-8 shadow-none focus:shadow-none"
                />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="mt-1">
                <div className="flex items-center justify-start gap-2 p-2">
                    <div className="flex flex-col space-y-1 leading-none">
                        {user.name && <p className="font-medium">{user.name}</p>}
                        {user.username && (
                            <p className="w-[200px] truncate text-sm text-muted-foreground">
                                @{user.username}
                            </p>
                        )}
                    </div>
                </div>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                    className="cursor-pointer"
                    onSelect={(event) => {
                        event.preventDefault()
                        signOut({
                            callbackUrl: `${window.location.origin}/login`,
                        })
                    }}
                >
                    Sign out
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}