Maquetación y estilos de la lista de productos

😄

export default {
  cart: [],
  products: [
    {
      'id': '1',
      'image': 'https://arepa.s3.amazonaws.com/camiseta.png',
      'title': 'Camiseta',
      'price': 25,
      'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      'id': '3',
      'image': 'https://arepa.s3.amazonaws.com/mug.png',
      'title': 'Mug',
      'price': 10,
      'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      'id': '4',
      'image': 'https://arepa.s3.amazonaws.com/pin.png',
      'title': 'Pin',
      'price': 4,
      'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      'id': '5',
      'image': 'https://arepa.s3.amazonaws.com/stickers1.png',
      'title': 'Stickers',
      'price': 2,
      'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      'id': '6',
      'image': 'https://arepa.s3.amazonaws.com/stickers2.png',
      'title': 'Stickers',
      'price': 2,
      'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
    {
      'id': '7',
      'image': 'https://arepa.s3.amazonaws.com/hoodie.png',
      'title': 'Hoodie',
      'price': 35,
      'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    },
  ],
};

¿Esta bien hacerlo con destructuring, cierto? 🤔:D

const Product = ({product}) => {
    let {image,title,price,description} = product
    return (
        <div className="Products-item">
            <img src={image} alt={title}/>
             <div className="Product-item-info">
                <h2>{title}
                   <span>${price}</span>
                </h2>
                <p>{description}</p>
             </div>
             <button type="button">Comrpar</button>
        </div>
    )
}

Seria bueno que tengamos un diseño para ir guiándonos con el proyecto. Saber que el Home va a tener esta forma y estos componentes, etc

Algunas clases no coinciden con el archivo de estilos descargado les paso mis apuntes ya funcionando:)

Products

import React from 'react';
import Product from './Product';
import '../styles/components/Products.css';

const Products = ({ products }) => {
  return (
    <div className="Products">
      <div className="Products-items">
        {products.map((product) => (
          <Product key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
};

export default Products;

Product

import React from 'react';

const Product = ({ product }) => {
  return (
    <div className="Products-item">
      <img src={product.image} alt={product.title} />
      <div className="Products-item-info">
        <h2>
          {product.title} <span>$ {product.price}</span>
        </h2>
        <p>{product.description}</p>
      </div>
      <button type="button">Comprar</button>
    </div>
  );
};

export default Product;

todos los izquierdos reservados jajasdjasd re tarde lo entendi

Comparto lo que hice en la clase en Typescript: Aportaciones serian un lujo, gracias.
link a commit

Nota rápida…
Cuando vas a desestructurar los props en un componente desde los argumentos del mismo:

const Product = ({image,title,price,description}) => {
  return (
    <div className="Products-item">
      <img src={product.image} alt={product.title} />
      <div className="Products-item-info">
        <h2>
          {product.title} <span>$ {product.price}</span>
        </h2>
        <p>{product.description}</p>
      </div>
      <button type="button">Comprar</button>
    </div>
  );
};

export default Product;

Puedes evitarte el enviar los props como en el video

<Product key={product.id} product={product} />

y enviarlos ya desestructurados desde un inicio

<Product key={product.id} {...product} />

¡Hola! Estoy siguiendo este curso, pero usando NextJS + TypeScript. Aún no lo termino, pero voy agregando poco a poco las cosas que vamos viendo.
 
Si les interesa ver el proyecto hasta esta clase, les dejo el link del proyecto: https://github.com/d4vsanchez/platzi-conf-merch/tree/list-products
 
Me he desviado un poco en lo que se implementa en lo siguiente:

• Al usar CSS modules, estoy tratando de crear nombres de clases un poco más específicas obviando el contexto, que me lo da el nombre del archivo.
• Estoy usando la API de i18n de JavaScript para renderizar el precio, para no tener que hacerlo manualmente.

Ojo que, siguiendo la clase hay un error al nombrar las clases en Product. Si te salen desproporcionadas las imagenes y sin estilos, prueba este código para Product.jsx

import React from 'react';

const Product = ({ product }) => {
    return (
        <div className="Products-item">
            <img src={product.image} alt={product.title} />
            <div className="Products-item-info">
                <h2>
                    {product.title}
                    <span>
                        $
                        {' '}
                        {product.price}
                    </span>
                </h2>
                <p>{product.description}</p>
            </div>
            <button type="button">Comprar</button>
        </div>
    );
}

export default Product; 

Excelente clase!

Hola, les dejo el avance de mi proyecto, hecho en Nextjs:

https://github.com/danyel117/platzi-conf-store

a