const useStyles = makeStyles((theme) => ({ root: { [theme.breakpoints.down('sm')]: { margin: 8, width: 'calc(50% - 16px)' }, [theme.breakpoints.up('md')]: { margin: 16, width: 'calc(33.3333% - 32px)' } }, content: { display: 'flex', padding: '16 8', textAlign: 'left', '&:last-child': { paddingBottom: 16 } }, icon: { marginRight: 0, marginLeft: 'auto' }, media: { height: 0, paddingTop: '100%' }, price: { color: theme.palette.secondary.dark, fontSize: 16 }, productName: { boxOrient: 'vertical', display: '-webkit-box', fontSize: 14, lineHeight: '18px', overflow: 'hidden', [theme.breakpoints.down('sm')]: { height: 36, lineClamp: 2, }, [theme.breakpoints.up('md')]: { height: 18, lineClamp: 1, } } })); const ProductCard = (props) => { const classes = useStyles(); return ( Card className={classes.root}> CardMedia className={classes.media} image={images[0].path} onClick={() => dispatch(push('/product/'+props.id))} title="" /> CardContent className={classes.content}> div onClick={() => dispatch(push('/product/'+props.id))}> Typography className={classes.productName} color="textSecondary" component="p"> {props.name} /Typography> Typography className={classes.price} component="p"> ¥{price} /Typography> /div> {isAdministrator && ( <> IconButton className={classes.icon} onClick={handleClick} color="inherit"> MoreVertIcon /> /IconButton> Menu id="menu-appbar" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose} > MenuItem onClick={() => { dispatch(push('/product/edit/'+props.id)) handleClose() }} > 編集する /MenuItem> MenuItem onClick={() => { dispatch(deleteProduct(props.id)) handleClose() }} > 削除する /MenuItem> /Menu> > )} /CardContent> /Card> ); } export default ProductCard