массовое удаление

Lab/src/components/Home.jsx

@@ -1,5 +1,4 @@
-
-import React from "react";
+import React, { useState } from "react";
 import BookForm from "./BookForm";
 import BookList from "./BookList";
 
@@ -16,8 +15,30 @@ export default function Home({
   searchQuery,
   setSearchQuery,
   statusFilter,
-  setStatusFilter
+  setStatusFilter,
+  onDeleteSelected // новый пропс!
 }) {
+  // Состояние для выделенных книг
+  const [selectedIds, setSelectedIds] = useState([]);
+
+  // Обработчик выделения карточки
+  const handleSelect = (id, checked) => {
+    setSelectedIds(prev =>
+      checked ? [...prev, id] : prev.filter(selectedId => selectedId !== id)
+    );
+  };
+
+  // Кнопка массового удаления
+  const handleDeleteSelected = () => {
+    if (
+      selectedIds.length &&
+      window.confirm(`Удалить ${selectedIds.length} выделенных книг?`)
+    ) {
+      onDeleteSelected(selectedIds);
+      setSelectedIds([]); // очистка выделения
+    }
+  };
+
   return (
     <>
       <h1 className="mb-4">Книги</h1>
@@ -40,6 +61,18 @@ export default function Home({
           ))}
         </select>
       </div>
+
+      {/* Кнопка массового удаления */}
+      <div className="mb-2">
+        <button
+          className="btn btn-danger"
+          disabled={selectedIds.length === 0}
+          onClick={handleDeleteSelected}
+        >
+          Удалить выделенные ({selectedIds.length})
+        </button>
+      </div>
+
       <BookForm
         authors={authors}
         statuses={statuses}
@@ -53,6 +86,8 @@ export default function Home({
         statuses={statuses}
         onEdit={setEditingBook}
         onDelete={onDelete}
+        selectedIds={selectedIds}
+        onSelect={handleSelect}
       />
     </>
   );