Add Phase 1 Pocket Pascal UI: home, pantry, week plan, and plate.
Replace the hello-world shell with the elevated design system, bilingual screens, recipe/extras data, and the interactive Mein Teller view. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
53
client/src/screens/BuilderScreen.tsx
Normal file
53
client/src/screens/BuilderScreen.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { useLocation } from "react-router-dom"
|
||||
|
||||
import { GlassCard } from "@/components/ui-pp/GlassCard"
|
||||
import { t, tr, ui } from "@/i18n/ui"
|
||||
import { foodById } from "@/lib/catalog"
|
||||
import { useLanguage } from "@/lib/language"
|
||||
import type { BuilderHandoffState } from "@/types/domain"
|
||||
|
||||
export function BuilderScreen() {
|
||||
const { lang } = useLanguage()
|
||||
const location = useLocation()
|
||||
const handoff = location.state as BuilderHandoffState | null
|
||||
const ingredientIds = handoff?.ingredientIds ?? []
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<GlassCard className="p-4">
|
||||
<p className="type-label text-[var(--ink-faint)]">
|
||||
{t(ui.stubs.comingSoon, lang)}
|
||||
</p>
|
||||
<h1 className="type-display mt-2 text-[var(--ink)]">
|
||||
{t(ui.stubs.builderTitle, lang)}
|
||||
</h1>
|
||||
<p className="type-body mt-2 text-[var(--ink-soft)]">
|
||||
{t(ui.stubs.builderBody, lang)}
|
||||
</p>
|
||||
</GlassCard>
|
||||
|
||||
{ingredientIds.length > 0 ? (
|
||||
<GlassCard className="p-4">
|
||||
<p className="type-body-emphasis text-[var(--ink)]">
|
||||
{t(ui.stubs.builderHandoff, lang)}
|
||||
</p>
|
||||
<ul className="mt-3 flex flex-wrap gap-2">
|
||||
{ingredientIds.map((id) => {
|
||||
const item = foodById[id]
|
||||
if (!item) return null
|
||||
return (
|
||||
<li
|
||||
key={id}
|
||||
className="type-caption rounded-[var(--radius-pill)] px-3 py-2 font-bold text-[var(--ink)] ring-1 ring-[var(--border)]"
|
||||
style={{ background: "var(--glass-fill)" }}
|
||||
>
|
||||
{tr(item.name, lang)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</GlassCard>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user