Skip to content

Commit e6cfa12

Browse files
ArnauACRArnauACR
authored
Merge pull request #3 from ArnauACR/development
feature(style): global and layout styles
2 parents 888648a + ea6cfdb commit e6cfa12

3 files changed

Lines changed: 169 additions & 84 deletions

File tree

‎src/App.jsx‎

Lines changed: 61 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,67 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
1+
'use client';
2+
3+
import BookCard from './components/BookCard';
4+
import BookForm from './components/BookForm';
5+
import { useBooks } from './hooks/useBooks';
6+
import styles from './App.module.css';
57

68
function App() {
7-
const [count, setCount] = useState(0)
9+
const {
10+
books,
11+
showForm,
12+
editingBook,
13+
addBook,
14+
updateBook,
15+
deleteBook,
16+
editBook,
17+
cancelForm,
18+
openAddForm,
19+
} = useBooks();
820

921
return (
10-
<>
11-
<div>
12-
<a href="https://vite.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.jsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
31-
</>
32-
)
22+
<div className={styles['book-app']}>
23+
<header className={styles['book-app__header']}>
24+
<h1 className={styles['book-app__title']}>My Book Collection</h1>
25+
{!showForm && (
26+
<button
27+
className={`${styles['book-app__button']} ${styles['book-app__button--add']}`}
28+
onClick={openAddForm}
29+
>
30+
Add New Book
31+
</button>
32+
)}
33+
{showForm && (
34+
<button
35+
className={`${styles['book-app__button']} ${styles['book-app__button--cancel']}`}
36+
onClick={cancelForm}
37+
>
38+
Cancel
39+
</button>
40+
)}
41+
</header>
42+
43+
{showForm && (
44+
<BookForm
45+
book={editingBook}
46+
onSubmit={editingBook ? updateBook : addBook}
47+
onCancel={cancelForm}
48+
/>
49+
)}
50+
51+
<main className={styles['book-app__main']}>
52+
<div className={styles['book-app__grid']}>
53+
{books.map((book) => (
54+
<BookCard
55+
key={book.id}
56+
book={book}
57+
onEdit={editBook}
58+
onDelete={deleteBook}
59+
/>
60+
))}
61+
</div>
62+
</main>
63+
</div>
64+
);
3365
}
3466

35-
export default App
67+
export default App;

‎src/App.module.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
.book-app {
2+
min-height: 100vh;
3+
background-color: #f8f9fa;
4+
font-family:
5+
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
6+
}
7+
8+
.book-app__header {
9+
background: white;
10+
padding: 1rem;
11+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
12+
display: flex;
13+
justify-content: space-between;
14+
align-items: center;
15+
position: sticky;
16+
top: 0;
17+
z-index: 100;
18+
}
19+
20+
.book-app__title {
21+
margin: 0;
22+
font-size: 1.5rem;
23+
color: #333;
24+
font-weight: 600;
25+
}
26+
27+
.book-app__button {
28+
font-family: inherit;
29+
cursor: pointer;
30+
}
31+
32+
.book-app__button--add {
33+
background-color: #42a646;
34+
color: white;
35+
padding: 0.75rem 1rem;
36+
border-radius: 4px;
37+
font-size: 0.9rem;
38+
font-weight: 500;
39+
border: none;
40+
}
41+
42+
.book-app__button--cancel {
43+
background-color: #42a646;
44+
color: white;
45+
padding: 0.75rem 1rem;
46+
border-radius: 4px;
47+
font-size: 0.9rem;
48+
font-weight: 500;
49+
border: none;
50+
}
51+
52+
.book-app__main {
53+
padding: 1rem;
54+
max-width: 1200px;
55+
margin: 0 auto;
56+
}
57+
58+
.book-app__grid {
59+
display: grid;
60+
gap: 1rem;
61+
grid-template-columns: 1fr;
62+
}
63+
64+
.book-app__empty {
65+
text-align: center;
66+
padding: 3rem 1rem;
67+
color: #666;
68+
}
69+
70+
.book-app__empty-text {
71+
margin-bottom: 1.5rem;
72+
font-size: 1.1rem;
73+
}
74+
75+
@media (min-width: 768px) {
76+
.book-app__header {
77+
padding: 1rem 2rem;
78+
}
79+
80+
.book-app__title {
81+
font-size: 1.75rem;
82+
}
83+
84+
.book-app__main {
85+
padding: 1rem 2rem;
86+
}
87+
88+
.book-app__grid {
89+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
90+
gap: 1.5rem;
91+
}
92+
}

‎src/index.css‎

Lines changed: 16 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,29 @@
1-
:root {
2-
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
5-
6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
9-
10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
}
15-
16-
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
20-
}
21-
a:hover {
22-
color: #535bf2;
1+
* {
2+
box-sizing: border-box;
233
}
244

255
body {
266
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
7+
padding: 0;
8+
font-family:
9+
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
10+
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
11+
-webkit-font-smoothing: antialiased;
12+
-moz-osx-font-smoothing: grayscale;
13+
background-color: #f8f9fa;
14+
color: #212529;
3115
}
3216

33-
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
17+
#root {
18+
min-height: 100vh;
3619
}
3720

3821
button {
39-
border-radius: 8px;
40-
border: 1px solid transparent;
41-
padding: 0.6em 1.2em;
42-
font-size: 1em;
43-
font-weight: 500;
4422
font-family: inherit;
45-
background-color: #1a1a1a;
46-
cursor: pointer;
47-
transition: border-color 0.25s;
48-
}
49-
button:hover {
50-
border-color: #646cff;
51-
}
52-
button:focus,
53-
button:focus-visible {
54-
outline: 4px auto -webkit-focus-ring-color;
5523
}
5624

57-
@media (prefers-color-scheme: light) {
58-
:root {
59-
color: #213547;
60-
background-color: #ffffff;
61-
}
62-
a:hover {
63-
color: #747bff;
64-
}
65-
button {
66-
background-color: #f9f9f9;
67-
}
25+
input,
26+
select,
27+
textarea {
28+
font-family: inherit;
6829
}

0 commit comments

Comments
 (0)