Skip to content

Commit 0acd174

Browse files
mattolivrmattolivr
committed
2-DR2-TP2.04/2.05
1 parent 233f9c0 commit 0acd174

File tree

6 files changed

+167
-72
lines changed

6 files changed

+167
-72
lines changed

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

Lines changed: 6 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -10,58 +10,10 @@ body {
1010
font-family: system-ui, -apple-system, sans-serif;
1111
}
1212

13-
table {
14-
width: 100%;
15-
margin-top: 2rem;
16-
border-collapse: separate;
17-
border-spacing: 0 12px;
18-
19-
thead {
20-
tr {
21-
background-color: #5a4438;
22-
}
23-
24-
th {
25-
padding: 14px 20px;
26-
text-align: left;
27-
color: #e5d4c1;
28-
font-weight: 500;
29-
30-
&:first-child {
31-
border-radius: 6px 0 0 6px;
32-
}
33-
34-
&:last-child {
35-
border-radius: 0 6px 6px 0;
36-
}
37-
}
38-
}
13+
main {
14+
padding-block: 32px;
3915

40-
tbody {
41-
tr {
42-
background-color: #7a6050;
43-
44-
&:hover {
45-
background-color: #8b6f5c;
46-
}
47-
}
48-
49-
td {
50-
padding: 16px 20px;
51-
color: #f8f4f0;
52-
53-
&:first-child {
54-
border-radius: 6px 0 0 6px;
55-
font-weight: 500;
56-
}
57-
58-
&:last-child {
59-
border-radius: 0 6px 6px 0;
60-
}
61-
}
62-
}
63-
}
64-
65-
66-
67-
16+
display: flex;
17+
flex-direction: column;
18+
gap: 12px;
19+
}

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

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,18 @@
11
import './App.css'
22
import Header from './components/header'
3+
import BookForm from './components/bookform'
4+
import BookList from './components/booklist'
35

46
function App() {
57
const livros = retornaLivros();
68

79
return (
810
<>
911
<Header />
10-
<table>
11-
<thead>
12-
<tr>
13-
<th>Título</th>
14-
<th>Autor</th>
15-
<th>Ano</th>
16-
</tr>
17-
</thead>
18-
<tbody>
19-
{livros.map((livro, index) => (
20-
<tr key={index}>
21-
<td>{livro.titulo}</td>
22-
<td>{livro.autor}</td>
23-
<td>{livro.ano}</td>
24-
</tr>
25-
))}
26-
</tbody>
27-
</table>
12+
<main>
13+
<BookForm />
14+
<BookList livros={livros} />
15+
</main>
2816
</>
2917
)
3018
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import "./styles.css";
2+
3+
export default function BookForm() {
4+
return (
5+
<form className="book-form">
6+
<div className="form-row">
7+
<div className="form-group">
8+
<label htmlFor="titulo">Título</label>
9+
<input type="text" id="titulo" name="titulo" />
10+
</div>
11+
12+
<div className="form-group">
13+
<label htmlFor="autor">Autor</label>
14+
<input type="text" id="autor" name="autor" />
15+
</div>
16+
17+
<div className="form-group">
18+
<label htmlFor="ano">Ano</label>
19+
<input type="number" id="ano" name="ano" />
20+
</div>
21+
</div>
22+
23+
<div className="button-container">
24+
<button type="submit">Adicionar Livro</button>
25+
</div>
26+
</form>
27+
)
28+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.book-form {
2+
background-color: #5a4438;
3+
padding: 24px;
4+
border-radius: 6px;
5+
6+
.form-row {
7+
display: flex;
8+
gap: 16px;
9+
margin-bottom: 16px;
10+
}
11+
12+
.button-container {
13+
display: flex;
14+
justify-content: center;
15+
}
16+
17+
button {
18+
background-color: #5a7a4a;
19+
color: #f8f4f0;
20+
border: none;
21+
padding: 12px 24px;
22+
border-radius: 4px;
23+
cursor: pointer;
24+
font-size: 16px;
25+
font-weight: 500;
26+
width: 50%;
27+
28+
&:hover {
29+
background-color: #6b8f5a;
30+
}
31+
}
32+
}
33+
34+
.form-group {
35+
flex: 1;
36+
37+
label {
38+
display: block;
39+
margin-bottom: 6px;
40+
color: #e5d4c1;
41+
font-weight: 500;
42+
}
43+
44+
input {
45+
width: 100%;
46+
padding: 10px 12px;
47+
border: none;
48+
border-radius: 4px;
49+
background-color: #f8f4f0;
50+
color: #3a2820;
51+
font-size: 16px;
52+
}
53+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import "./styles.css";
2+
3+
export default function BookList({ livros }) {
4+
return (
5+
<table>
6+
<thead>
7+
<tr>
8+
<th>Título</th>
9+
<th>Autor</th>
10+
<th>Ano</th>
11+
</tr>
12+
</thead>
13+
<tbody>
14+
{livros.map((livro, index) => (
15+
<tr key={index}>
16+
<td>{livro.titulo}</td>
17+
<td>{livro.autor}</td>
18+
<td>{livro.ano}</td>
19+
</tr>
20+
))}
21+
</tbody>
22+
</table>
23+
)
24+
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
table {
2+
width: 100%;
3+
border-collapse: separate;
4+
border-spacing: 0 12px;
5+
6+
thead {
7+
tr {
8+
background-color: #5a4438;
9+
}
10+
11+
th {
12+
padding: 14px 20px;
13+
text-align: left;
14+
color: #e5d4c1;
15+
font-weight: 500;
16+
17+
&:first-child {
18+
border-radius: 6px 0 0 6px;
19+
}
20+
21+
&:last-child {
22+
border-radius: 0 6px 6px 0;
23+
}
24+
}
25+
}
26+
27+
tbody {
28+
tr {
29+
background-color: #7a6050;
30+
31+
&:hover {
32+
background-color: #8b6f5c;
33+
}
34+
}
35+
36+
td {
37+
padding: 16px 20px;
38+
color: #f8f4f0;
39+
40+
&:first-child {
41+
border-radius: 6px 0 0 6px;
42+
font-weight: 500;
43+
}
44+
45+
&:last-child {
46+
border-radius: 0 6px 6px 0;
47+
}
48+
}
49+
}
50+
}

0 commit comments

Comments
 (0)