2-DR2-AT.10

Author: mattolivr

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

@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } 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);
+  const navigate = useNavigate();
 
   useEffect(() => {
     const buscaProdutos = async () => {
@@ -30,10 +31,18 @@ export default function ProductList() {
       { produtos.map((produto) => (
           <div key={produto.id} className={style.produto}>
             <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 className={style.conteudo}>
+              <h3>
+                <Link to={`/produtos/${produto.id}`}>{produto.title}</Link>
+              </h3>
+              <p className={style.preco}>Preço: R$ {produto.price.toString().replace(".", ",")}</p>
+            </div>
+            <button 
+              className={style.botaoEditar}
+              onClick={() => navigate(`/novo/${produto.id}`)}
+            >
+              Editar
+            </button>
           </div>
         ))
       }

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

@@ -1,8 +1,10 @@
 .lista {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .produto {
@@ -12,37 +14,75 @@
   padding: 16px;
   transition: transform 0.2s, box-shadow 0.2s;
   display: flex;
-  flex-direction: column;
-  gap: 8px;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+}
+
+.produto:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .thumbnail {
-  width: 100%;
-  height: 200px;
+  width: 120px;
+  height: 120px;
   object-fit: cover;
   border-radius: 4px;
-  margin-bottom: 12px;
+  flex-shrink: 0;
 }
 
-.produto {
-  h3 {
-    font-size: 1.2rem;
-    color: #333;
-  }
+.conteudo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-  p {
-    font-size: 1rem;
-  }
+.produto h3 {
+  font-size: 1.2rem;
+  color: #333;
+  margin: 0;
+}
+
+.produto h3 a {
+  color: #333;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.produto h3 a:hover {
+  color: #2c5f2d;
+}
+
+.produto p {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.preco {
+  font-weight: bold;
+  font-size: 1rem;
+  color: #2c5f2d;
+}
+
+.botaoEditar {
+  background-color: #2c5f2d;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 10px 20px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  flex-shrink: 0;
+}
 
-  .preco {
-    font-weight: bold;
-    font-size: 0.9rem;
-    margin-top: auto;
-  }
+.botaoEditar:hover {
+  background-color: #1f4520;
 }
 
 .carregando {
-  grid-column: 1 / -1;
   text-align: center;
   padding: 20px;
 }