104 lines
2.8 KiB
TypeScript
104 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { User } from '@supabase/supabase-js'
|
|
import { supabase } from '@/lib/supabase'
|
|
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|
import { toast } from '@/components/ui/use-toast'
|
|
|
|
interface UserAccountNavProps {
|
|
user: User | null
|
|
}
|
|
|
|
export function UserAccountNav({ user }: UserAccountNavProps) {
|
|
const router = useRouter()
|
|
|
|
const getInitials = (name: string) => {
|
|
return name
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.toUpperCase()
|
|
}
|
|
|
|
const handleSignOut = async () => {
|
|
try {
|
|
await supabase.auth.signOut()
|
|
toast({
|
|
title: 'Signed out',
|
|
description: 'You have been signed out of your account.',
|
|
})
|
|
router.push('/')
|
|
router.refresh()
|
|
} catch (error: any) {
|
|
toast({
|
|
title: 'Error signing out',
|
|
description: error.message,
|
|
variant: 'destructive',
|
|
})
|
|
}
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<Button variant="outline" asChild>
|
|
<Link href="/auth">Sign In</Link>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
// Get user metadata
|
|
const fullName = user.user_metadata?.full_name || 'User'
|
|
const email = user.email || ''
|
|
const avatarUrl = user.user_metadata?.avatar_url
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={avatarUrl} alt={fullName} />
|
|
<AvatarFallback>{getInitials(fullName)}</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56" align="end" forceMount>
|
|
<div className="flex flex-col space-y-1 p-2">
|
|
<p className="text-sm font-medium leading-none">{fullName}</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{email}
|
|
</p>
|
|
</div>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/dashboard">Dashboard</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/dashboard/profile">Profile</Link>
|
|
</DropdownMenuItem>
|
|
{user.app_metadata.admin && (
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/dashboard/admin">Admin</Link>
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
className="cursor-pointer"
|
|
onSelect={handleSignOut}
|
|
>
|
|
Sign out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|