рефакторинг

src/page/TemplatesOverviewPage.tsx

@@ -0,0 +1,46 @@
+import TemplateCard from '@/component/TemplateCard'
+import { Button } from '@/component/ui/button'
+import { useTemplateContext } from '@/entitiy/template/model/TemplateContext'
+import { Plus, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+export const TemplatesOverviewPage = () => {
+  const navigate = useNavigate()
+  const { templates, deleteTemplate } = useTemplateContext()
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+
+  const removeSelected = () => {
+    selected.forEach(deleteTemplate)
+    setSelected(new Set())
+  }
+
+  return (
+    <main className="mx-auto max-w-7xl p-6">
+      <header className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Шаблоны протоколов</h1>
+        <div className="flex gap-3">
+          {!!selected.size && (
+            <Button variant="destructive" onClick={removeSelected}>
+              <Trash2 className="mr-2 h-4 w-4" />
+              Удалить ({selected.size})
+            </Button>
+          )}
+          <Button onClick={() => navigate('/templates/new')}>
+            <Plus className="mr-2 h-4 w-4" /> Создать
+          </Button>
+        </div>
+      </header>
+
+      <section className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {templates.map(t => (
+          <TemplateCard
+            key={t.id}
+            template={t}
+            isSelected={selected.has(t.id)}
+          />
+        ))}
+      </section>
+    </main>
+  )
+}