site-header.tsx
2,568 bytes
| 1 | import { GitCompareArrows, LogOut } from 'lucide-react'; |
|---|---|
| 2 | import Link from 'next/link'; |
| 3 | import { auth, signIn, signOut } from '@/auth'; |
| 4 | import { KeyButton } from '@/components/key-button'; |
| 5 | import { ThemeToggle } from '@/components/theme-toggle'; |
| 6 | import { Button } from '@/components/ui/button'; |
| 7 | import { isGithubAuthConfigured } from '@/lib/env'; |
| 8 | |
| 9 | export async function SiteHeader() { |
| 10 | const session = await auth(); |
| 11 | const user = session?.user; |
| 12 | |
| 13 | return ( |
| 14 | <header className="sticky top-0 z-40 w-full border-b bg-background/85 backdrop-blur-xl supports-[backdrop-filter]:bg-background/70"> |
| 15 | <div className="container flex h-16 items-center gap-4"> |
| 16 | <Link href="/" className="flex items-center gap-2.5"> |
| 17 | <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground"> |
| 18 | <GitCompareArrows className="h-4 w-4" /> |
| 19 | </span> |
| 20 | <span className="font-display text-[17px] font-semibold tracking-[-0.025em]"> |
| 21 | Roundtable |
| 22 | </span> |
| 23 | </Link> |
| 24 | |
| 25 | <nav className="ml-5 hidden items-center gap-1 text-sm md:flex"> |
| 26 | <NavLink href="/debate">Ask a question</NavLink> |
| 27 | <NavLink href="/demo">Examples</NavLink> |
| 28 | {user && <NavLink href="/history">Past questions</NavLink>} |
| 29 | </nav> |
| 30 | |
| 31 | <div className="ml-auto flex items-center gap-1"> |
| 32 | <KeyButton /> |
| 33 | <ThemeToggle /> |
| 34 | {user ? ( |
| 35 | <form |
| 36 | action={async () => { |
| 37 | 'use server'; |
| 38 | await signOut({ redirectTo: '/' }); |
| 39 | }} |
| 40 | > |
| 41 | <Button variant="ghost" size="sm" className="gap-2" type="submit"> |
| 42 | <LogOut className="h-4 w-4" /> |
| 43 | <span className="hidden sm:inline">{user.name ?? 'Sign out'}</span> |
| 44 | </Button> |
| 45 | </form> |
| 46 | ) : isGithubAuthConfigured ? ( |
| 47 | <form |
| 48 | action={async () => { |
| 49 | 'use server'; |
| 50 | await signIn('github', { redirectTo: '/history' }); |
| 51 | }} |
| 52 | > |
| 53 | <Button variant="outline" size="sm" type="submit"> |
| 54 | Sign in |
| 55 | </Button> |
| 56 | </form> |
| 57 | ) : null} |
| 58 | </div> |
| 59 | </div> |
| 60 | </header> |
| 61 | ); |
| 62 | } |
| 63 | |
| 64 | function NavLink({ href, children }: { href: string; children: React.ReactNode }) { |
| 65 | return ( |
| 66 | <Link |
| 67 | href={href} |
| 68 | className="rounded-md px-3 py-1.5 text-muted-foreground transition-colors hover:text-foreground" |
| 69 | > |
| 70 | {children} |
| 71 | </Link> |
| 72 | ); |
| 73 | } |
| 74 | |