251205:0000 Just start debug backend/frontend

frontend/components/drawings/list.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Drawing } from "@/types/drawing";
+import { DrawingCard } from "@/components/drawings/card";
+import { drawingApi } from "@/lib/api/drawings";
+import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+
+interface DrawingListProps {
+  type: "CONTRACT" | "SHOP";
+}
+
+export function DrawingList({ type }: DrawingListProps) {
+  const [drawings, setDrawings] = useState<Drawing[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchDrawings = async () => {
+      setLoading(true);
+      try {
+        const data = await drawingApi.getAll({ type });
+        setDrawings(data);
+      } catch (error) {
+        console.error("Failed to fetch drawings", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDrawings();
+  }, [type]);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (drawings.length === 0) {
+    return (
+      <div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
+        No drawings found.
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+      {drawings.map((drawing) => (
+        <DrawingCard key={drawing.drawing_id} drawing={drawing} />
+      ))}
+    </div>
+  );
+}