2-DR2-TP2.09

Author: mattolivr

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/App.jsx

@@ -15,12 +15,16 @@ function App() {
     setLivros([...livros, novoLivro]);
   };
 
+  const removerLivro = (index) => {
+    setLivros(livros.filter((_, i) => i !== index));
+  };
+
   return (
     <>
       <Header />
       <main>
         <BookForm onAddBook={adicionarLivro} />
-        <BookList livros={livros} />
+        <BookList livros={livros} onRemoveBook={removerLivro} />
       </main>
     </>
   )

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/components/booklist/index.jsx

@@ -1,13 +1,14 @@
 import "./styles.css";
 
-export default function BookList({ livros }) {
+export default function BookList({ livros, onRemoveBook }) {
   return (
     <table>
       <thead>
         <tr>
           <th>Título</th>
           <th>Autor</th>
           <th>Ano</th>
+          <th></th>
         </tr>
       </thead>
       <tbody>
@@ -16,6 +17,14 @@ export default function BookList({ livros }) {
             <td>{livro.titulo}</td>
             <td>{livro.autor}</td>
             <td>{livro.ano}</td>
+            <td>
+              <button 
+                className="btn-excluir" 
+                onClick={() => onRemoveBook(index)}
+              >
+                Excluir
+              </button>
+            </td>
           </tr>
         ))}
       </tbody>

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-TP2.00-biblioteca-crud/src/components/booklist/styles.css

@@ -20,6 +20,8 @@ table {
 
       &:last-child {
         border-radius: 0 6px 6px 0;
+        width: 0;
+        white-space: nowrap;
       }
     }
   }
@@ -44,7 +46,24 @@ table {
 
       &:last-child {
         border-radius: 0 6px 6px 0;
+        width: 0;
+        white-space: nowrap;
       }
     }
   }
 }
+
+.btn-excluir {
+  background-color: #a84848;
+  color: #f8f4f0;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+
+  &:hover {
+    background-color: #c05555;
+  }
+}