2-DR2-AT.06

Author: mattolivr

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/App.css

@@ -0,0 +1,3 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/pages/product-detail/index.jsx

@@ -1,7 +1,55 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
 import style from './style.module.css';
 
 export default function ProductDetail() {
+  const { id } = useParams();
+  const [produto, setProduto] = useState(null);
+  const [carregando, setCarregando] = useState(true);
+
+  useEffect(() => {
+    const buscarProduto = async () => {
+      try {
+        setCarregando(true);
+        const response = await axios.get(`https://dummyjson.com/products/${id}`);
+        setProduto(response.data);
+      } catch (error) {
+        new Error(error);
+      } finally {
+        setCarregando(false);
+      }
+    };
+    buscarProduto();
+  }, [id]);
+
+  if (carregando) {
+    return <div className={style.carregando}>Carregando produto...</div>;
+  }
+
   return (
-    <div>ProductDetail</div>
+    <div className={style.container}>
+      <h1>{produto.title}</h1>
+      
+      <div className={style.imagens}>
+        {produto.images?.map((imagem, index) => (
+          <img 
+            key={index} 
+            src={imagem} 
+            alt={`${produto.title} - ${index + 1}`} 
+            className={style.imagem}
+          />
+        ))}
+      </div>
+
+      <div className={style.info}>
+        <p className={style.descricao}>{produto.description}</p>
+        <p className={style.preco}>Preço: R$ {produto.price?.toString().replace(".", ",")}</p>
+        <p>Marca: {produto.brand}</p>
+        <p>Categoria: {produto.category}</p>
+        <p>Avaliação: {produto.rating} ⭐</p>
+        <p>Em estoque: {produto.stock} unidades</p>
+      </div>
+    </div>
   );
 }

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/pages/product-list/index.jsx

@@ -1,33 +1,41 @@
 import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import axios from 'axios';
 import style from './style.module.css';
 
 export default function ProductList() {
   const [produtos, setProdutos] = useState([]);
+  const [carregando, setCarregando] = useState(true);
 
   useEffect(() => {
     const buscaProdutos = async () => {
       try {
         const response = await axios.get('https://dummyjson.com/products');
-        setProdutos(response.data.products);        
+        setProdutos(response.data.products);
       } catch (error) {
         new Error(error);
+      } finally {
+        setCarregando(false);
       }
     };
     buscaProdutos();
   }, []);
 
+  if (carregando) {
+    return <div className={style.carregando}>Carregando produtos...</div>;
+  }
+
   return (
     <div className={style.lista}>
-      { produtos.length 
-        ? produtos.map((produto) => (
+      { produtos.map((produto) => (
           <div key={produto.id} className={style.produto}>
-            <h3>{produto.title}</h3>
-            <p>{produto.description}</p>
-            <p>Preço: R$ {produto.price}</p>
+            <img src={produto.thumbnail} alt={produto.title} className={style.thumbnail} />
+            <h3>
+              <Link to={`/produtos/${produto.id}`}>{produto.title}</Link>
+            </h3>
+            <p className={style.preco}>Preço: R$ {produto.price.toString().replace(".", ",")}</p>
           </div>
         ))
-        : <p>Carregando produtos...</p>
       }
     </div>
   );

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/pages/product-list/style.module.css

@@ -0,0 +1,48 @@
+.lista {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+  padding: 20px;
+}
+
+.produto {
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 16px;
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.thumbnail {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 12px;
+}
+
+.produto {
+  h3 {
+    font-size: 1.2rem;
+    color: #333;
+  }
+
+  p {
+    font-size: 1rem;
+  }
+
+  .preco {
+    font-weight: bold;
+    font-size: 0.9rem;
+    margin-top: auto;
+  }
+}
+
+.carregando {
+  grid-column: 1 / -1;
+  text-align: center;
+  padding: 20px;
+}