45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
|
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>
|
|
);
|
|
} |