Dish nutrition card with a kcal line, stacked macro bar, and three color-keyed grams-per-macro tiles.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Food6 } from "@/components/beste/piece/food6";
<Food6
dish="Grilled chicken bowl"
kcal="620 kcal"
macros={[
{
"label": "Carbs",
"grams": 68,
"pct": 40,
"color": "bg-sky-500"
},
{
"label": "Protein",
"grams": 42,
"pct": 34,
"color": "bg-emerald-500"
},
{
"label": "Fat",
"grams": 22,
"pct": 26,
"color": "bg-amber-500"
}
]}
/>Recipe tile with a warm chef tile, time/kcal/servings row, and a two-column ingredients list.
Venue tile with a warm gradient cover, floating cuisine and rating pills, and a neighborhood-ETA row.
Menu row with a warm gradient thumbnail, dish name and price pair, description, and dietary tag chips.
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.
Itemized food order receipt with qty-by-name lines, a subtotal/delivery/tip breakdown, and bold total.
Wrapped diet chip filter where selected options fill with emerald and inactives stay bordered.