FDA-style nutrition panel with a thick rule under calories and indented sub-nutrient rows.
The import and the props worth knowing about, in one place.
import { Health12 } from "@/components/beste/piece/health12";
<Health12
serving="Serving size 1 cup (240 g)"
calories="280"
rows={[
{
"label": "Total fat",
"value": "10 g",
"dv": "13%",
"bold": true
},
{
"label": "Saturated fat",
"value": "2 g",
"dv": "10%",
"indent": true
},
{
"label": "Total carbs",
"value": "34 g",
"dv": "12%",
"bold": true
},
{
"label": "Protein",
"value": "16 g",
"bold": true
}
]}
bordered={false}
/>