Create products list

src/components/Products/Products.css

@@ -0,0 +1,47 @@
+.products {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.products ul {
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(
+      200px,
+      1fr
+    )
+  );
+  gap: 1rem;
+}
+
+.products li {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  box-shadow: 0 0 10px 10px rgba(0, 0, 0, .1);
+  border-radius: 4px;
+  background: #111;
+  color: #fff;
+  padding: 1rem;
+}
+
+.products h3 {
+  margin: 0;
+}
+
+.products span {
+  font-size: 1rem;
+  opacity: .9;
+}
+
+.products img {
+  border-radius: 4px;
+  width: 100%;
+  aspect-ratio: 16/9;
+  display: block;
+  object-fit: cover;
+  background: #fff;
+}

src/components/Products/Products.jsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/prop-types */
+import './Products.css'
+import { AddToCartIcon } from '../Icons/Icons.jsx'
+
+export function Products ({ products }) {
+  return (
+    <main className='products'>
+      <ul>
+        {products.map(product => (
+          <li key={product.id}>
+            <img
+              src={product.thumbnail}
+              alt={product.title}
+            />
+
+            <div>
+              <strong>{product.title}</strong> - {product.price}€
+            </div>
+
+            <div>
+              <button>
+                <AddToCartIcon />
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+    </main>
+  )
+}

src/components/app/App.jsx

@@ -1,11 +1,15 @@
+import { products } from '../../mocks/products.json'
+import { Products } from '../Products/Products'
 import './App.css'
 
 function App() {
 
   return (
     <>
       <div>
-        <span>Shopping cart</span>
+        <h1>Shopping cart</h1>
+        <Products products={products}/>
+
       </div>
     </>
   )