Phases 6-7

packages/web/src/app/(dashboard)/recipes/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useApi } from '@/lib/useApi';
+import { SetPageHeader } from '@/components/layout/SetPageHeader';
+import { RecipeList } from './RecipeList';
+
+function PageSkeleton() {
+  return (
+    <div style={{ padding: '28px 32px' }}>
+      {[...Array(3)].map((_, i) => (
+        <div
+          key={i}
+          style={{
+            height: 80,
+            background: 'var(--bg-elev)',
+            borderRadius: 'var(--r-md)',
+            marginBottom: 12,
+            opacity: 0.5,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function NoHousehold() {
+  return (
+    <div style={{ padding: '28px 32px' }}>
+      <div
+        style={{
+          background: 'var(--bg-elev)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--r-md)',
+          padding: 24,
+        }}
+      >
+        <p style={{ color: 'var(--ink-muted)', fontSize: 14 }}>
+          You need to create or join a household before managing recipes.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default function RecipesPage() {
+  const { householdId, isLoading } = useApi();
+
+  if (isLoading) {
+    return (
+      <>
+        <SetPageHeader title="Recipes" subtitle="Your recipe collection" />
+        <PageSkeleton />
+      </>
+    );
+  }
+
+  if (!householdId) {
+    return (
+      <>
+        <SetPageHeader title="Recipes" subtitle="Your recipe collection" />
+        <NoHousehold />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <SetPageHeader title="Recipes" subtitle="Your recipe collection" />
+      <RecipeList householdId={householdId} />
+    </>
+  );
+}