spb/fetcha

1"use client";2import * as React from "react";3import Link from "next/link";4import { usePathname } from "next/navigation";5import { Menu, X } from "lucide-react";6import { Logo } from "@/components/ui/logo";7import { Button } from "@/components/ui/button";8import { ThemeToggle } from "@/components/ui/theme";9import { cn } from "@/lib/utils";1011const links = [12  { href: "/#platform", label: "Platform" },13  { href: "/pricing", label: "Access" },14  { href: "/docs", label: "Docs" },15  { href: "/changelog", label: "Changelog" },16  { href: "/status", label: "Status" },17];1819export function MarketingNav({ signedIn }: { signedIn: boolean }) {20  const [open, setOpen] = React.useState(false);21  const pathname = usePathname();22  return (23    <header className="sticky top-0 z-40 border-b border-border/70 bg-bg/80 backdrop-blur-md">24      <div className="container-page flex h-14 items-center justify-between gap-6">25        <div className="flex items-center gap-8">26          <Logo />27          <nav className="hidden items-center gap-1 md:flex" aria-label="Main">28            {links.map((l) => (29              <Link30                key={l.href}31                href={l.href}32                className={cn("rounded-md px-2.5 py-1.5 text-[13.5px] font-medium text-fg-muted transition-colors hover:text-fg", pathname === l.href && "text-fg")}33              >34                {l.label}35              </Link>36            ))}37          </nav>38        </div>39        <div className="hidden items-center gap-2 md:flex">40          <ThemeToggle />41          {signedIn ? (42            <Button asChild size="sm"><Link href="/dashboard">Dashboard</Link></Button>43          ) : (44            <>45              <Button asChild variant="ghost" size="sm"><a href="mailto:hello@fetcha.co?subject=Fetcha%20access">Request access</a></Button>46              <Button asChild size="sm"><Link href="/login">Log in</Link></Button>47            </>48          )}49        </div>50        <Button variant="ghost" size="icon-sm" className="md:hidden" onClick={() => setOpen((v) => !v)} aria-label={open ? "Close menu" : "Open menu"} aria-expanded={open}>51          {open ? <X /> : <Menu />}52        </Button>53      </div>54      {open ? (55        <div className="border-t border-border bg-bg md:hidden animate-fade-in">56          <nav className="container-page flex flex-col gap-1 py-3" aria-label="Mobile">57            {links.map((l) => (58              <Link key={l.href} href={l.href} onClick={() => setOpen(false)} className="rounded-md px-2 py-2 text-[15px] font-medium text-fg-muted hover:bg-bg-subtle hover:text-fg">59                {l.label}60              </Link>61            ))}62            <div className="mt-2 flex items-center gap-2 border-t border-border pt-3">63              <ThemeToggle />64              {signedIn ? (65                <Button asChild className="flex-1"><Link href="/dashboard">Dashboard</Link></Button>66              ) : (67                <>68                  <Button asChild variant="outline" className="flex-1"><a href="mailto:hello@fetcha.co?subject=Fetcha%20access">Request access</a></Button>69                  <Button asChild className="flex-1"><Link href="/login">Log in</Link></Button>70                </>71              )}72            </div>73          </nav>74        </div>75      ) : null}76    </header>77  );78}79