personal-site/ui/app/recipes/layout.tsx at d6593be6f1b16f31eaef1af55ac7b18c76f0584b · Robbie-Palmer/personal-site · GitHub

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import type { Metadata } from "next";
import { Caveat, JetBrains_Mono, Kalam } from "next/font/google";
import Link from "next/link";
import { Suspense } from "react";
import { AuthButton } from "@/components/recipes/auth-button";
import { RecipeSearch } from "@/components/recipes/recipe-search";
import { RecipeSearchUrlSync } from "@/components/recipes/recipe-search-url-sync";
import { RecipeThemeBody } from "@/components/recipes/recipe-theme-body";
import { TimerDock } from "@/components/recipes/timer-dock";
import { RecipeSearchProvider } from "@/contexts/recipe-search-context";
import { siteConfig } from "@/lib/config/site-config";
import "./recipe-theme.css";

const caveat = Caveat({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-caveat",
  display: "swap",
});

const kalam = Kalam({
  subsets: ["latin"],
  weight: ["300", "400", "700"],
  variable: "--font-kalam",
  display: "swap",
});

const jetBrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  weight: ["400", "500"],
  variable: "--font-jetbrains",
  display: "swap",
});

export const metadata: Metadata = {
  title: {
    default: "Robbie's Recipes",
    template: "%s | Robbie's Recipes",
  },
  description: "A collection of my favorite recipes",
};

export default function RecipesLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const currentYear = new Date().getFullYear();
  const fontVars = `${caveat.variable} ${kalam.variable} ${jetBrainsMono.variable}`;

  return (
    <RecipeSearchProvider>
      {/* Mirror the theme + fonts onto <body> so portaled UI (mobile filter
          drawer, popovers) inherits the warm palette instead of the dark base. */}
      <RecipeThemeBody classNames={`recipe-theme ${fontVars}`} />
      <Suspense fallback={null}>
        <RecipeSearchUrlSync />
      </Suspense>
      <div
        className={`recipe-theme recipe-surface ${fontVars} antialiased flex flex-col min-h-screen`}
      >
        <header className="sticky top-0 z-50 border-b border-[var(--line)] bg-[var(--paper)]/95 backdrop-blur supports-[backdrop-filter]:bg-[var(--paper)]/75">
          {/* On desktop everything sits on one row (logo · tab · search · auth);
              on mobile the search drops to a full-width second row so it isn't
              squeezed against the logo. */}
          <nav className="container mx-auto px-4 py-3 max-w-7xl flex flex-wrap items-center gap-x-6 gap-y-3">
            <div className="order-1 flex items-baseline gap-4">
              <Link
                href="/recipes"
                className="shrink-0 rt-display text-3xl leading-none text-foreground"
              >
                Robbie's <span className="rt-logo-accent">recipes</span>
              </Link>
              <Link
                href="/recipes"
                className="rt-tab text-[0.95rem]"
                data-active="true"
              >
                Recipes
              </Link>
            </div>
            <div className="order-2 ms-auto md:order-3 md:ms-0">
              <AuthButton />
            </div>
            <div className="order-3 w-full md:order-2 md:w-64 md:ms-auto">
              <RecipeSearch />
            </div>
          </nav>
        </header>

        <main className="relative z-0 flex-1 flex flex-col">{children}</main>

        <footer className="border-t border-[var(--line)] mt-auto">
          <div className="container mx-auto px-4 py-8">
            <div className="flex flex-col items-center gap-4">
              <p className="rt-mono text-[var(--ink-3)]">
                © {currentYear} {siteConfig.author.name}
              </p>
            </div>
          </div>
        </footer>
      </div>

      {/* Outside the isolated .recipe-surface stacking context so it paints
          above the cook-mode overlay (which portals to <body>). Theme tokens
          come from the classes RecipeThemeBody mirrors onto <body>. */}
      <TimerDock />
    </RecipeSearchProvider>
  );
}