From 300ee39c0d993e6a4853372c9631648668a68702 Mon Sep 17 00:00:00 2001
From: armorbreak001 <contact@agentvote.cc>
Date: Tue, 14 Apr 2026 19:10:58 +0800
Subject: [PATCH] feat: responsive grid layout scaffold for bounties

- Add BountyGrid.tsx component with CSS Grid
- Mobile: 1 col, Tablet: 2 cols, Desktop: 3 cols, Wide: 4 cols
- Strict gap-6 between elements
- Export from components/ui/index.ts

Fixes #289
---
 frontend/src/components/ui/BountyGrid.tsx | 31 +++++++++++++++++++++++
 frontend/src/components/ui/index.ts       |  2 ++
 2 files changed, 33 insertions(+)
 create mode 100644 frontend/src/components/ui/BountyGrid.tsx

diff --git a/frontend/src/components/ui/BountyGrid.tsx b/frontend/src/components/ui/BountyGrid.tsx
new file mode 100644
index 0000000..04935ca
--- /dev/null
+++ b/frontend/src/components/ui/BountyGrid.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface BountyGridProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Responsive grid layout for bounty cards.
+ * - Mobile (<640px): 1 column
+ * - Tablet (≥640px): 2 columns
+ * - Desktop (≥1024px): 3 columns
+ * - Wide (≥1280px): 4 columns
+ */
+export function BountyGrid({ children, className }: BountyGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default BountyGrid;
diff --git a/frontend/src/components/ui/index.ts b/frontend/src/components/ui/index.ts
index 531166f..35fd882 100644
--- a/frontend/src/components/ui/index.ts
+++ b/frontend/src/components/ui/index.ts
@@ -14,3 +14,5 @@ export {
   DropdownMenuItem,
 } from "./DropdownMenu";
 export { Pagination } from "./Pagination";
+export { DataTable } from "./DataTable";
+export { BountyGrid } from "./BountyGrid";