Create src/components/grabber/PostGrid.tsx

src/components/grabber/PostGrid.tsx

@@ -0,0 +1,32 @@
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import { Lightbox } from './Lightbox';
+
+export function PostGrid({ posts, onSelect }: { posts: any[], onSelect: (ids: string[]) => void }) {
+  const selected = new Set();
+  const toggle = (id: string) => {
+    selected.has(id) ? selected.delete(id) : selected.add(id);
+    onSelect(Array.from(selected));
+  };
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 p-4">
+      {posts.map((post) => (
+        <PostCard key={post.id} post={post} selected={selected.has(post.id)} onToggle={() => toggle(post.id)} />
+      ))}
+    </div>
+  );
+}
+
+export function PostCard({ post, selected, onToggle }: any) {
+  return (
+    <div className="relative border rounded overflow-hidden group">
+      <Checkbox checked={selected} onCheckedChange={() => onToggle()} className="absolute top-2 left-2 z-10" />
+      <img src={post.previewUrl} alt="" className="w-full aspect-square object-cover" />
+      <div className="p-2 flex justify-between items-center">
+        <Badge variant="outline">{post.rating}</Badge>
+        <span className="text-xs font-bold">{post.score}</span>
+      </div>
+    </div>
+  );
+}