feature(style): global and layout styles

src/App.jsx

@@ -1,35 +1,67 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+'use client';
+
+import BookCard from './components/BookCard';
+import BookForm from './components/BookForm';
+import { useBooks } from './hooks/useBooks';
+import styles from './App.module.css';
 
 function App() {
-  const [count, setCount] = useState(0)
+  const {
+    books,
+    showForm,
+    editingBook,
+    addBook,
+    updateBook,
+    deleteBook,
+    editBook,
+    cancelForm,
+    openAddForm,
+  } = useBooks();
 
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <div className={styles['book-app']}>
+      <header className={styles['book-app__header']}>
+        <h1 className={styles['book-app__title']}>My Book Collection</h1>
+        {!showForm && (
+          <button
+            className={`${styles['book-app__button']} ${styles['book-app__button--add']}`}
+            onClick={openAddForm}
+          >
+            Add New Book
+          </button>
+        )}
+        {showForm && (
+          <button
+            className={`${styles['book-app__button']} ${styles['book-app__button--cancel']}`}
+            onClick={cancelForm}
+          >
+            Cancel
+          </button>
+        )}
+      </header>
+
+      {showForm && (
+        <BookForm
+          book={editingBook}
+          onSubmit={editingBook ? updateBook : addBook}
+          onCancel={cancelForm}
+        />
+      )}
+
+      <main className={styles['book-app__main']}>
+        <div className={styles['book-app__grid']}>
+          {books.map((book) => (
+            <BookCard
+              key={book.id}
+              book={book}
+              onEdit={editBook}
+              onDelete={deleteBook}
+            />
+          ))}
+        </div>
+      </main>
+    </div>
+  );
 }
 
-export default App
+export default App;

src/App.module.css

@@ -0,0 +1,92 @@
+.book-app {
+  min-height: 100vh;
+  background-color: #f8f9fa;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+.book-app__header {
+  background: white;
+  padding: 1rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.book-app__title {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #333;
+  font-weight: 600;
+}
+
+.book-app__button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.book-app__button--add {
+  background-color: #42a646;
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  border: none;
+}
+
+.book-app__button--cancel {
+  background-color: #42a646;
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  border: none;
+}
+
+.book-app__main {
+  padding: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.book-app__grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+.book-app__empty {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: #666;
+}
+
+.book-app__empty-text {
+  margin-bottom: 1.5rem;
+  font-size: 1.1rem;
+}
+
+@media (min-width: 768px) {
+  .book-app__header {
+    padding: 1rem 2rem;
+  }
+
+  .book-app__title {
+    font-size: 1.75rem;
+  }
+
+  .book-app__main {
+    padding: 1rem 2rem;
+  }
+
+  .book-app__grid {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+  }
+}

src/index.css

@@ -1,68 +1,29 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+* {
+  box-sizing: border-box;
 }
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  padding: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #f8f9fa;
+  color: #212529;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+#root {
+  min-height: 100vh;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+input,
+select,
+textarea {
+  font-family: inherit;
 }