a482bf5b09
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>
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { useNavigate } from "react-router-dom"
|
|
import { ChefHat } from "lucide-react"
|
|
|
|
import { GlassCard } from "@/components/ui-pp/GlassCard"
|
|
import { t, ui } from "@/i18n/ui"
|
|
import { useLanguage } from "@/lib/language"
|
|
|
|
/** Navigation tile — whole card is the hit target (same pattern as KnowledgeHub). */
|
|
export function BuilderSlot() {
|
|
const { lang } = useLanguage()
|
|
const navigate = useNavigate()
|
|
|
|
return (
|
|
<GlassCard
|
|
variant="interactive"
|
|
className="p-4"
|
|
onClick={() => navigate("/builder")}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter" || event.key === " ") {
|
|
event.preventDefault()
|
|
navigate("/builder")
|
|
}
|
|
}}
|
|
>
|
|
<div className="flex flex-col gap-3">
|
|
<span
|
|
className="flex h-10 w-10 items-center justify-center rounded-[var(--radius-control)]"
|
|
style={{ backgroundImage: "var(--gradient-primary)" }}
|
|
>
|
|
<ChefHat className="h-5 w-5 text-[var(--ink)]" aria-hidden />
|
|
</span>
|
|
<div>
|
|
<h3 className="type-title-sm text-[var(--ink)]">
|
|
{t(ui.builderSlot.title, lang)}
|
|
</h3>
|
|
<p className="type-body mt-1 text-[var(--ink-soft)]">
|
|
{t(ui.builderSlot.body, lang)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</GlassCard>
|
|
)
|
|
}
|