product.js

// src/components/product.js

const Product = ({ product, single, url }) => {
  const sizes = {
    individual: {
      maxImg: '40rem',
      maxWrap: '42rem',
    },
    list: {
      maxImg: '20rem',
      maxWrap: '22rem',
    },
  };

  return (
    <Box
      align="center"
      pad="small"
      width={{ max: single ? sizes.individual.maxWrap : sizes.list.maxWrap }}
    >
      <ImgWrap
        height={{
          min: sizes.list.maxImg,
          max: single ? sizes.individual.maxImg : sizes.list.maxImg,
        }}
        overflow="hidden"
        round="small"
        width={{
          min: '18rem',
          max: single ? sizes.individual.maxImg : sizes.list.maxImg,
        }}
      >
        <Img isLazy src={product.metadata.image.imgix_url} />
      </ImgWrap>
      {single ? (
        <Heading level="3" textAlign="center">
          {product.title}
        </Heading>
      ) : (
        <Anchor color="dark-1" href={`products/${product.slug}/`}>
          <Heading level="3" textAlign="center">
            {product.title}
          </Heading>
        </Anchor>
      )}
      <Box align="center" direction="row" justify="around">
        <Text>{`$${product.metadata.price}`}</Text>
        <Button
          className="snipcart-add-item"
          color="brand"
          data-item-description="Test description."
          data-item-id={product.metadata.id}
          data-item-image={product.metadata.image.imgix_url}
          data-item-name={product.title}
          data-item-price={product.metadata.price}
          data-item-url={single ? url : `${url}products/${product.slug}/`}
          label="Add to Cart"
          margin="small"
          size="large"
          style={size}
          type="button"
        />
      </Box>
    </Box>
  );
};