72 lines
1.5 KiB
TypeScript
72 lines
1.5 KiB
TypeScript
'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} />
|
|
</>
|
|
);
|
|
}
|