с допками

Lab/src/App.jsx

@@ -10,6 +10,8 @@ function App() {
   const [authors] = useState(data.authors);
   const [statuses] = useState(data.statuses);
   const [editingBook, setEditingBook] = useState(null);
+  const [statusFilter, setStatusFilter] = useState(""); // пусто — все книги
+
 
   // Загрузка книг с сервера
   useEffect(() => {
@@ -54,11 +56,34 @@ function App() {
     });
   };
 
+    // Фильтрация книг по статусу
+  const filteredBooks = statusFilter
+  ? books.filter(
+      book =>
+        statuses.find(s => String(s.id) === String(book.statusId))?.name === statusFilter
+    )
+  : books;
+
+  
   return (
     <>
       <Navbar />
       <main className="container py-4">
         <h1 className="mb-4">Книги</h1>
+        {/* --- Фильтр по статусу --- */}
+        <div className="mb-3" style={{ maxWidth: 350 }}>
+          <select
+            className="form-select"
+            value={statusFilter}
+            onChange={e => setStatusFilter(e.target.value)}
+          >
+            <option value="">Все статусы</option>
+            {statuses.map(s => (
+              <option key={s.id} value={s.name}>{s.name}</option>
+            ))}
+          </select>
+        </div>
+        {/* --- Форма добавления/редактирования --- */}
         <BookForm
           authors={authors}
           statuses={statuses}
@@ -66,8 +91,9 @@ function App() {
           editingBook={editingBook}
           onCancel={() => setEditingBook(null)}
         />
+        {/* --- Список книг (фильтрованные) --- */}
         <BookList
-          books={books}
+          books={filteredBooks}
           authors={authors}
           statuses={statuses}
           onEdit={setEditingBook}
@@ -79,4 +105,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

Lab/src/components/BookCard.jsx

@@ -8,7 +8,7 @@ function BookCard({ book, authorName, statusName, onEdit, onDelete }) {
         src={book.cover || "https://placehold.co/200x300"}
         className="card-img-top shadow mt-2 mb-3"
         alt="Обложка книги"
-        style={{ maxHeight: "300px", objectFit: "contain" }}
+        style={{ height: "300px", objectFit: "contain" }}
       />
       <div className="card-body">
         <h5 className="card-title">{book.title}</h5>