hygraph-examples/with-react-router/src/Components/ProductDetailsCard.jsx at 9214a43eecf2fe9d0db58474bfc952183849e43e · hygraph/hygraph-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const ProductDetailsCard = ({ product }) => {
  return (
    <div className="flex-container">
      {product.image && (
        <img src={product.image.url} alt="" className="cocktail-img" />
      )}
      <div className="cocktail-infos">
        <div className="row">
          <h3 className="label">Name: </h3>
          <p className="text">{product.name}</p>
        </div>
        <div className="row">
          <h3 className="label">Category: </h3>
          <p className="text">{product.category}</p>
        </div>
        <div className="row">
          <h3 className="label">Info: </h3>
          <p className="text">{product.info}</p>
        </div>
        <div className="row">
          <h3 className="label">Instructions: </h3>
          <p className="text">{product.instructions}</p>
        </div>
        <div className="row">
          <h3 className="label">Ingredients: </h3>
          <p className="text">{product.ingredients}</p>
        </div>
      </div>
    </div>
  );
};

export default ProductDetailsCard;