Create src/routes/index.tsx

src/routes/index.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { useSites } from '../lib/grabber/useSites';
+import { SearchBar } from '../components/grabber/SearchBar';
+import { PostGrid } from '../components/grabber/PostGrid';
+import { AddSiteDialog } from '../components/grabber/AddSiteDialog';
+import { SiteSelect } from '../components/grabber/SiteSelect';
+
+export default function GrabberPage() {
+  const { sites, addSite } = useSites();
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [results, setResults] = useState<any[]>([]);
+  const [siteId, setSiteId] = useState('e621');
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+
+  return (
+    <div className="max-w-6xl mx-auto p-4">
+      <header className="flex justify-between items-center mb-8 border-b pb-4">
+        <h1 className="text-2xl font-bold">Grabber</h1>
+        <div className="flex gap-2">
+          <SiteSelect sites={sites} onChange={(id) => setSiteId(id)} />
+          <button onClick={() => setIsAddDialogOpen(true)} className="px-3 py-1 bg-secondary rounded text-sm">+ Add site</button>
+        </div>
+      </header>
+
+      <SearchBar onResults={setResults} />
+
+      {results.length > 0 && (
+        <div className="mt-8">
+          <div className="flex justify-between items-center mb-4">
+            <span>Selected: {selectedIds.length}</span>
+            <button disabled={selectedIds.length === 0} className="px-4 py-2 bg-primary text-white rounded disabled:opacity-50">
+              Download ZIP
+            </button>
+          </div>
+          <PostGrid posts={results} onSelect={setSelectedIds} />
+        </div>
+      )}
+
+      <AddSiteDialog open={isAddDialogOpen} setOpen={setIsAddDialogOpen} onAdd={addSite} />
+    </div>
+  );
+}