import { Box, Table, TableBody, TableCell, TableRow, Typography } from '@material-ui/core'; import isBlank from '@utils/isBlank'; import React from 'react'; import { ProductQuery } from '../../graphql'; type Props = { product: NonNullable<ProductQuery['product']>; }; const ProductAttributes: React.VFC<Props> = ({ product }) => ( <Box sx={{ mt: 6 }}> <Typography gutterBottom variant="h3"> Additional Information </Typography> <Table> <TableBody> {(product.__typename === 'SimpleProduct' || product.__typename === 'VariableProduct') && ( <> {!isBlank(product.weight) && ( <TableRow> <TableCell>Weight</TableCell> <TableCell>{product.weight} g</TableCell> </TableRow> )} {(!isBlank(product.length) || !isBlank(product.width) || isBlank(product.height)) && ( <TableRow> <TableCell>Dimensions</TableCell> <TableCell> {`${[product.length, product.width, product.height] .filter((length) => !isBlank(length)) .join(' x ')} cm`} </TableCell> </TableRow> )} </> )} {(product.paMaterials?.nodes?.length ?? 0) > 0 && ( <TableRow> <TableCell>Material</TableCell> <TableCell> {product.paMaterials?.nodes?.map((paMaterial) => paMaterial?.name)} </TableCell> </TableRow> )} {(product.paPaperWeights?.nodes?.length ?? 0) > 0 && ( <TableRow> <TableCell>Paper Weight</TableCell> <TableCell> {product.paPaperWeights?.nodes?.map((paPaperWeight) => paPaperWeight?.name)} </TableCell> </TableRow> )} </TableBody> </Table> </Box> ); export default ProductAttributes;