Skip to content

Commit 30795c9

Browse files
mattolivrmattolivr
committed
2-DR2-AT.16
1 parent 28964c6 commit 30795c9

File tree

10 files changed

+426
-169
lines changed

10 files changed

+426
-169
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
body {
2-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
2+
font-family: var(--font-family)
33
}

‎2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/components/header/index.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Link } from "react-router-dom";
2+
import style from './style.module.css';
23

34
export default function Header() {
45
return (
5-
<header>
6+
<header className={style.header}>
67
<h1>Dummy E-Commerce Admin</h1>
78
<h2>Sistema de Catálogo e Gestão de Produtos</h2>
89

9-
<nav>
10+
<nav className={style.nav}>
1011
<ul>
1112
<li><Link to="/">Lista de Produtos</Link></li>
1213
<li><Link to="/novo">Novo Produto</Link></li>

‎2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/components/header/style.module.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.header {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
padding: 16px 8px;
6+
row-gap: 16px;
7+
8+
text-align: center;
9+
10+
background-color: var(--primary);
11+
color: white;
12+
13+
h2 {
14+
font-size: 1.1rem;
15+
}
16+
}
17+
.nav ul {
18+
display: flex;
19+
flex-direction: row;
20+
justify-content: space-between;
21+
gap: 16px;
22+
23+
list-style-type: none;
24+
25+
li {
26+
background-color: var(--primary-light);
27+
border-radius: 8px;
28+
padding: 8px 16px;
29+
30+
flex: 1 0;
31+
text-align: center;
32+
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
37+
&:hover {
38+
background-color: var(--primary-dark);
39+
}
40+
41+
a {
42+
color: white;
43+
text-decoration: none;
44+
font-weight: 600;
45+
font-size: 0.9rem;
46+
}
47+
}
48+
}

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
:root {
2+
--primary: #3498db;
3+
--primary-light: #5dade2;
4+
--primary-dark: #2e86c1;
5+
6+
--error: #e74c3c;
7+
--error-dark: #c0392b;
8+
9+
--success: #17bd5c;
10+
--success-dark: #27ae60;
11+
12+
--secondary: #e67e22;
13+
--secondary-dark: #d35400;
14+
15+
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
16+
}
17+
18+
* {
19+
margin: 0;
20+
padding: 0;
21+
box-sizing: border-box;
22+
}

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@ export default function ProductDetail() {
2929

3030
return (
3131
<div className={style.container}>
32-
<h1>{produto.title}</h1>
32+
<div className={style.topo}>
33+
<h1>{produto.title}</h1>
34+
<h3>{produto.brand}</h3>
35+
</div>
3336

3437
<div className={style.imagens}>
3538
{produto.images?.map((imagem, index) => (
@@ -42,13 +45,15 @@ export default function ProductDetail() {
4245
))}
4346
</div>
4447

48+
<div className={style.centro}>
49+
<p className={style.preco}>R$ {produto.price?.toString().replace(".", ",")}</p>
50+
<span className={style.restantes}>Restam apenas {produto.stock} unidades!</span>
51+
</div>
52+
4553
<div className={style.info}>
4654
<p className={style.descricao}>{produto.description}</p>
47-
<p className={style.preco}>Preço: R$ {produto.price?.toString().replace(".", ",")}</p>
48-
<p>Marca: {produto.brand}</p>
49-
<p>Categoria: {produto.category}</p>
50-
<p>Avaliação: {produto.rating} ⭐</p>
51-
<p>Em estoque: {produto.stock} unidades</p>
55+
<span>{produto.category}</span>
56+
<span>{produto.rating} ⭐</span>
5257
</div>
5358
</div>
5459
);

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
.container {
2+
max-width: 900px;
3+
margin: 0 auto;
4+
padding: 16px 8px;
5+
6+
display: flex;
7+
flex-direction: column;
8+
align-items: stretch;
9+
10+
h1 {
11+
font-size: 1.5rem;
12+
color: #333;
13+
}
14+
15+
h3 {
16+
font-size: 1.2rem;
17+
color: #696969;
18+
}
19+
}
20+
21+
.carregando {
22+
text-align: center;
23+
padding: 40px 16px;
24+
font-size: 1.1rem;
25+
color: #666;
26+
}
27+
28+
.imagens {
29+
display: flex;
30+
flex-direction: column;
31+
gap: 12px;
32+
margin-block: 24px;
33+
34+
.imagem {
35+
width: 100%;
36+
height: auto;
37+
border-radius: 8px;
38+
border: 2px solid var(--primary-light);
39+
background-color: white;
40+
}
41+
}
42+
43+
.centro {
44+
display: flex;
45+
flex-direction: column;
46+
gap: 12px;
47+
margin-bottom: 24px;
48+
}
49+
50+
.preco {
51+
font-weight: 700;
52+
font-size: 1.6rem;
53+
color: var(--success-dark);
54+
}
55+
56+
.restantes {
57+
align-self: flex-start;
58+
59+
background-color: var(--error);
60+
padding: 4px 8px;
61+
border-radius: 24px;
62+
63+
font-size: 0.9rem;
64+
color: white;
65+
}
66+
67+
.info {
68+
background-color: var(--primary-light);
69+
border-radius: 8px;
70+
padding: 16px;
71+
72+
display: flex;
73+
flex-direction: row;
74+
flex-wrap: wrap;
75+
gap: 12px;
76+
77+
p {
78+
font-size: 1rem;
79+
color: #333;
80+
line-height: 1.5;
81+
}
82+
83+
span {
84+
background-color: var(--primary-dark);
85+
86+
font-weight: 600;
87+
color: white;
88+
89+
padding: 6px 12px;
90+
border-radius: 24px;
91+
}
92+
}
93+
94+
.descricao {
95+
font-size: 1rem;
96+
margin-bottom: 8px;
97+
line-height: 1.6;
98+
}
99+
100+
@media screen and (min-width: 576px) {
101+
.container {
102+
display: grid;
103+
grid-template-columns: 250px 1fr;
104+
grid-template-rows: min-content;
105+
column-gap: 24px;
106+
}
107+
108+
.topo {
109+
align-self: center;
110+
}
111+
112+
.imagens {
113+
grid-row: 1 / span 2;
114+
}
115+
116+
.info {
117+
grid-column: span 2;
118+
}
119+
}
120+
121+
@media screen and (min-width: 768px) {
122+
123+
}

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function ProductForm() {
2424
category: response.data.category
2525
});
2626
} catch (error) {
27-
console.error('Erro ao buscar produto:', error);
27+
new Error(error);
2828
} finally {
2929
setCarregando(false);
3030
}
@@ -43,20 +43,15 @@ export default function ProductForm() {
4343
};
4444

4545
if (id) {
46-
// Modo de edição - requisição PUT
4746
const response = await axios.put(`https://dummyjson.com/products/${id}`, produtoData);
48-
console.log('Produto atualizado:', response.data);
4947
setMensagem({ tipo: 'sucesso', texto: 'Produto atualizado com sucesso!' });
5048
setTimeout(() => navigate(`/produtos/${id}`), 2000);
5149
} else {
52-
// Modo de criação - requisição POST
5350
const response = await axios.post('https://dummyjson.com/products/add', produtoData);
54-
console.log('Produto cadastrado:', response.data);
5551
setMensagem({ tipo: 'sucesso', texto: `Produto criado com sucesso! ID: ${response.data.id}` });
5652
setTimeout(() => navigate('/'), 2000);
5753
}
5854
} catch (error) {
59-
console.error('Erro ao salvar produto:', error);
6055
setMensagem({ tipo: 'erro', texto: 'Erro ao salvar produto. Tente novamente.' });
6156
}
6257
};

0 commit comments

Comments
 (0)