Arnaud
8dccd8898b
Language switcher (flag toggle) and dark-mode toggle in the marketing header, both usable by logged-out visitors -- the marketing pages previously hardcoded English (getMessages(undefined)) regardless of any preference, and had no theme control since the authenticated Nav's toggle isn't rendered there. New cookie-based locale resolution (lib/marketing-locale.ts) separate from the authenticated app's useLocale/setLocale, which persists via an authenticated PATCH that would just 401 and revert for an anonymous visitor. Root layout now falls back to that cookie for <html lang> when there's no session. Features/Home now cover cook mode, recipe variations, personalized recommendations, and ingredient substitution -- all real, shipped features that were missing from the page copy. Signup CTAs check isSignupsDisabled() and swap to "Signups closed" instead of "Get started free" -- still linking to /signup, since that page already handles the invite-token exception correctly. Fixed along the way: importing the cookie-name constant from marketing-locale.ts in the client-side LanguageSwitcher pulled that file's server-only imports (lib/auth/server -> the DB client -> `postgres`) into the client bundle, breaking the build on Node built-ins. Split the constant into its own client-safe file (marketing-locale-cookie.ts). Caught by `pnpm build`, not typecheck. Verified with typecheck, lint, and a full production build (clean compile) -- no DB in this sandbox to click through a real dev server. v0.48.1
62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import Link from "next/link";
|
|
import { headers } from "next/headers";
|
|
import { ChefHat } from "lucide-react";
|
|
import { auth } from "@/lib/auth/server";
|
|
import { buttonVariants } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import { getMessages } from "@/lib/i18n/server";
|
|
import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
|
|
import { isSignupsDisabled } from "@/lib/site-settings";
|
|
import { LanguageSwitcher } from "./language-switcher";
|
|
import { ThemeToggle } from "./theme-toggle";
|
|
|
|
const LINKS = [
|
|
{ href: "/features", key: "features" },
|
|
{ href: "/about", key: "about" },
|
|
] as const;
|
|
|
|
export async function MarketingNav() {
|
|
const [session, locale, signupsDisabled] = await Promise.all([
|
|
auth.api.getSession({ headers: await headers() }).catch(() => null),
|
|
getEffectiveMarketingLocale(),
|
|
isSignupsDisabled(),
|
|
]);
|
|
const m = getMessages(locale);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="container mx-auto flex h-14 items-center gap-6 px-4">
|
|
<Link href="/" className="flex items-center gap-2 font-semibold">
|
|
<ChefHat className="h-5 w-5" />
|
|
<span>Epicure</span>
|
|
</Link>
|
|
<nav className="hidden md:flex items-center gap-1 text-sm text-muted-foreground">
|
|
{LINKS.map(({ href, key }) => (
|
|
<Link key={href} href={href} className="px-3 py-2 rounded-md hover:text-foreground hover:bg-accent transition-colors">
|
|
{m.marketing.nav[key]}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<LanguageSwitcher current={locale} />
|
|
<ThemeToggle />
|
|
{session ? (
|
|
<Link href="/recipes" className={cn(buttonVariants({ size: "sm" }))}>
|
|
{m.marketing.nav.openApp}
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<Link href="/login" className={cn(buttonVariants({ variant: "ghost", size: "sm" }))}>
|
|
{m.marketing.nav.login}
|
|
</Link>
|
|
<Link href="/signup" className={cn(buttonVariants({ size: "sm" }))}>
|
|
{signupsDisabled ? m.marketing.nav.signupClosed : m.marketing.nav.signup}
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|