| 1 | 'use client' |
| 2 | |
| 3 | import { ArrowRight, Star } from 'lucide-react' |
| 4 | import Link from 'next/link |
| 5 | |
| 6 | import { SaturnLogo } |
| 7 | import { buttonVariants } |
| 8 | import { useSession } |
| 9 | |
| 10 | function formatStars(n: |
| 11 | if (n >= |
| 12 | return `${(n |
| 13 | } |
| 14 | return n.toString |
| 15 | } |
| 16 | |
| 17 | export function LandingNav({ |
| 18 | const { data: |
| 19 | |
| 20 | return ( |
| 21 | <nav className='sticky top-0 z-50 border-border/50 border-b bg-background/80 backdrop-blur-xl |
| 22 | <div className='mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 |
| 23 | <Link className=' |
| 24 | <SaturnLogo className=' |
| 25 | <span className='font-semibold text-lg tracking-tight |
| 26 | </Link> |
| 27 | <div className='flex items-center gap-1 sm:gap-2 |
| 28 | <a |
| 29 | className='group mr-1 hidden items-center gap-1.5 rounded-md border border-border/60 px-2.5 py-1 text-foreground/80 text-xs transition-colors hover:border-border hover:text-foreground sm:inline-flex' |
| 30 | href='https://github.com/phantomknight287/saturn' |
| 31 | rel='noreferrer noopener' |
| 32 | target='_blank' |
| 33 | > |
| 34 | <Star className=' |
| 35 | <span className='font-medium |
| 36 | {githubStars !== null |
| 37 | <span className='border-border/60 border-l pl-1.5 font-mono text-muted-foreground tabular-nums |
| 38 | {formatStars(githubStars)} |
| 39 | </span> |
| 40 | )} |
| 41 | </a> |
| 42 | {session?.user ? |
| 43 | <Link className={ |
| 44 | Dashboard |
| 45 | <ArrowRight className=' |
| 46 | </Link> |
| 47 | ) : ( |
| 48 | <> |
| 49 | <Link |
| 50 | className={buttonVariants({ |
| 51 | variant: 'ghost', |
| 52 | size: 'sm', |
| 53 | className: 'hidden sm:inline-flex', |
| 54 | })} |
| 55 | href='#pricing' |
| 56 | > |
| 57 | Pricing |
| 58 | </Link> |
| 59 | <Link |
| 60 | className={buttonVariants({ |
| 61 | href='/auth/sign-up' |
| 62 | > |
| 63 | Get started |
| 64 | <ArrowRight className=' |
| 65 | </Link> |
| 66 | </> |
| 67 | )} |
| 68 | </div> |
| 69 | </div> |
| 70 | </nav> |
| 71 | ) |
| 72 | } |