Recipe tile with a warm chef tile, time/kcal/servings row, and a two-column ingredients list.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Food7 } from "@/components/beste/piece/food7";
<Food7
recipe="Lemon-thyme chicken"
servings={4}
cookTime="45 min"
calories="480 kcal"
ingredients={[
{
"qty": "4",
"item": "chicken thighs"
},
{
"qty": "2",
"item": "lemons, zest and juice"
},
{
"qty": "3 tbsp",
"item": "olive oil"
},
{
"qty": "4 sprigs",
"item": "fresh thyme"
}
]}
tone="sunset"
/>Venue tile with a warm gradient cover, floating cuisine and rating pills, and a neighborhood-ETA row.
Keep at a gentle simmer, stirring every two minutes so the garlic doesn't scorch.
Recipe-step card with a step pill, mono MM:SS countdown, instruction paragraph, and rose progress bar.
Dish nutrition card with a kcal line, stacked macro bar, and three color-keyed grams-per-macro tiles.
Menu row with a warm gradient thumbnail, dish name and price pair, description, and dietary tag chips.
Emerald-bordered reservation summary with when/guests/seating/code arranged on a four-cell grid.
Four-step delivery progress with icon tiles, a ringed active step, ETA pill, and a courier footer.