diff options
Diffstat (limited to 'components/layout/user-profile-badge.tsx')
| -rw-r--r-- | components/layout/user-profile-badge.tsx | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/components/layout/user-profile-badge.tsx b/components/layout/user-profile-badge.tsx new file mode 100644 index 00000000..815ef05d --- /dev/null +++ b/components/layout/user-profile-badge.tsx @@ -0,0 +1,62 @@ +// app/pending/components/user-profile-badge.tsx +"use client" + +import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { Clock, LogOut } from "lucide-react" +import { signOut } from "next-auth/react" + +interface UserProfileBadgeProps { + user?: { + name?: string | null + email?: string | null + image?: string | null + } | null +} + +export function UserProfileBadge({ user }: UserProfileBadgeProps) { + if (!user) return null + + const initials = user.name + ?.split(" ") + .map((word) => word[0]?.toUpperCase()) + .join("") + + return ( + <DropdownMenu> + <DropdownMenuTrigger asChild> + <Button variant="ghost" className="flex items-center gap-2"> + <Avatar className="w-8 h-8"> + <AvatarImage src={user.image || ""} alt={user.name || ""} /> + <AvatarFallback> + {initials || "?"} + </AvatarFallback> + </Avatar> + <span className="text-sm font-medium">{user.name}</span> + </Button> + </DropdownMenuTrigger> + + <DropdownMenuContent align="end"> + <DropdownMenuLabel>계정 정보</DropdownMenuLabel> + <DropdownMenuSeparator /> + <DropdownMenuItem disabled> + <Clock className="w-4 h-4 mr-2" /> + 승인 대기 중 + </DropdownMenuItem> + <DropdownMenuSeparator /> + <DropdownMenuItem onClick={() => signOut()}> + <LogOut className="w-4 h-4 mr-2" /> + 로그아웃 + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + ) +}
\ No newline at end of file |