Spaces:
Configuration error
Configuration error
File size: 3,392 Bytes
bcce530 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | "use client"
import { useUser, useStackApp } from "@stackframe/stack"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { User, Settings, Star, FileText, LogOut, ChevronDown } from "lucide-react"
export function UserButton() {
const user = useUser()
const app = useStackApp()
if (!user) {
return (
<div className="flex gap-2">
<Link href="/sign-in">
<Button variant="ghost" size="sm">
Sign In
</Button>
</Link>
<Link href="/sign-up">
<Button size="sm">
Sign Up
</Button>
</Link>
</div>
)
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="gap-2">
<div className="h-7 w-7 rounded-full bg-linear-to-br from-primary to-accent flex items-center justify-center text-xs font-medium text-white">
{user.displayName?.[0]?.toUpperCase() || user.primaryEmail?.[0]?.toUpperCase() || "U"}
</div>
<span className="hidden sm:block max-w-24 truncate">
{user.displayName || user.primaryEmail?.split("@")[0]}
</span>
<ChevronDown className="h-3 w-3 opacity-50" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<div className="px-2 py-1.5">
<p className="text-sm font-medium">{user.displayName || "User"}</p>
<p className="text-xs text-muted-foreground truncate">{user.primaryEmail}</p>
</div>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/my-prompts" className="flex items-center gap-2 cursor-pointer">
<FileText className="h-4 w-4" />
My Prompts
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/starred" className="flex items-center gap-2 cursor-pointer">
<Star className="h-4 w-4" />
Starred
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/settings" className="flex items-center gap-2 cursor-pointer">
<Settings className="h-4 w-4" />
Settings
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => user.signOut()}
className="text-destructive focus:text-destructive cursor-pointer"
>
<LogOut className="h-4 w-4 mr-2" />
Sign Out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
|