@open-tender/ui
Version:
A component library for use with the Open Tender web app
22 lines (21 loc) • 2.01 kB
JavaScript
import React from 'react';
import { makeProps } from '../utils';
import ModalContent from './ModalContent';
import NutritionalInfoLine from './NutritionalInfoLine';
import View from './View';
const NutritionalInfo = ({ config, modalContentConfig, handlers, title, subtitle, nutritionalInfo }) => {
const { calories, cholesterol, dietary_fiber, protein, saturated_fat, sodium, sugars, total_carbs, total_fat, trans_fat } = nutritionalInfo;
return (React.createElement(ModalContent, { config: modalContentConfig, title: title, subtitle: subtitle, submit: handlers.submit, cancel: handlers.close, cancelText: "Close" },
React.createElement(View, Object.assign({}, makeProps(config, 'nutritionalInfo__content')),
React.createElement(NutritionalInfoLine, { config: config, label: "Calories", value: calories, unit: "" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Total Fat", value: total_fat, unit: "g" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Saturated Fat", value: saturated_fat, unit: "g" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Trans Fat", value: trans_fat, unit: "g" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Cholesterol", value: cholesterol, unit: "mg" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Sodium", value: sodium, unit: "mg" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Total Carbs", value: total_carbs, unit: "g" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Dietary Fiber", value: dietary_fiber, unit: "g" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Sugars", value: sugars, unit: "g" }),
React.createElement(NutritionalInfoLine, { config: config, label: "Protein", value: protein, unit: "g", isLast: true }))));
};
export default NutritionalInfo;