45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { RecipeBrowser, type RecipeSummary } from "@/app/components/RecipeBrowser";
|
|
import { SiteHeader } from "@/app/components/SiteHeader";
|
|
import { CATALOG_BY_ID } from "@/app/lib/catalog";
|
|
import { CUISINES } from "@/app/lib/plan";
|
|
import { RECIPES } from "@/app/lib/recipes";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Recipes",
|
|
description: `Browse all ${RECIPES.length} budget-friendly recipes across ${CUISINES.length} cuisines.`,
|
|
};
|
|
|
|
const SUMMARIES: RecipeSummary[] = RECIPES.map((r) => ({
|
|
id: r.id,
|
|
title: r.title,
|
|
description: r.description,
|
|
cuisine: r.cuisine,
|
|
kind: r.kind,
|
|
styles: r.styles,
|
|
appliances: r.requiredAppliances,
|
|
prepTime: r.prepTime,
|
|
ingredientText: r.ingredients.map((i) => CATALOG_BY_ID.get(i.itemId)?.name ?? i.itemId).join(" ").toLowerCase(),
|
|
}));
|
|
|
|
export default function RecipesPage() {
|
|
return (
|
|
<div className="min-h-dvh">
|
|
<SiteHeader active="recipes" />
|
|
<main className="mx-auto max-w-7xl px-4 py-10 sm:px-6">
|
|
<div className="border-b border-line pb-6">
|
|
<p className="font-mono text-xs tracking-widest text-brand-300 uppercase">Complete Index</p>
|
|
<h1 className="mt-1 font-serif text-3xl font-semibold tracking-tight sm:text-4xl">Recipe library</h1>
|
|
<p className="mt-2 max-w-2xl text-ink-muted">
|
|
Every dish the planner draws from: {RECIPES.length} tested recipes across {CUISINES.length} cuisines. Search by
|
|
ingredient (try “chickpeas” or “gochujang”) or filter strictly to the appliances in your kitchen.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<RecipeBrowser recipes={SUMMARIES} />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|