Refactor colors and palettes

src/components/palettes/single/DisplayPalette.tsx

@@ -0,0 +1,45 @@
+
+import ImageCard from "@/components/images/ImageCard";
+import { ColorPalette, ColorPaletteItem, Image, ImagePalette, ImageVariant } from "@/generated/prisma";
+
+type PaletteWithItems = ColorPalette & {
+  items: ColorPaletteItem[],
+  images: (ImagePalette & {
+    image: Image & {
+      variants: ImageVariant[]
+    }
+  })[]
+}
+
+export default function DisplayPalette({ palette }: { palette: PaletteWithItems }) {
+
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">{palette.name}</h1>
+        {/* <p className="text-muted-foreground">Type: {palette.type}</p> */}
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {palette.items.map((item) => (
+          <div
+            key={item.id}
+            className="w-10 h-10 rounded-full border"
+            style={{ backgroundColor: item.hex ?? "#ccc" }}
+            title={item.hex ?? "n/a"}
+          />
+        ))}
+      </div>
+
+      <div>
+        <h2 className="text-xl font-semibold">Used by {palette.images.length} image(s)</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-2">
+          {palette.images.map((image) => (
+            <ImageCard key={image.id} image={image} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}