62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
type RowType = {
|
|
label?: string;
|
|
value: string;
|
|
subRow?: RowType;
|
|
};
|
|
|
|
type Props = {
|
|
rows: RowType[];
|
|
/** On which value is based all the values
|
|
* @example "Pour 100g"
|
|
*/
|
|
baseValue: string;
|
|
};
|
|
|
|
function Row({ row, index }: { row: RowType; index?: number }) {
|
|
const isEven = index !== undefined && index % 2 === 0;
|
|
return (
|
|
<>
|
|
<div
|
|
className={cn(
|
|
"col-span-9 text-start pl-3 py-4",
|
|
isEven && "bg-primary-foreground text-primary",
|
|
)}
|
|
>
|
|
<div className="font-bold">{row.label}</div>
|
|
{row.subRow && <div>{row.subRow?.label ?? ""}</div>}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"col-span-3 text-end pr-3 py-4",
|
|
isEven && "bg-primary-foreground text-primary",
|
|
)}
|
|
>
|
|
<div>
|
|
<div className="font-bold">{row.value}</div>
|
|
{row.subRow && <div>{row.subRow?.value ?? ""}</div>}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function NutritionalValueList({ rows, baseValue }: Props) {
|
|
return (
|
|
<div>
|
|
<div className="grid grid-cols-12">
|
|
<Row
|
|
row={{
|
|
value: baseValue,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-12">
|
|
{rows.map((row, index) => {
|
|
return <Row row={row} index={index} />;
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|