49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
// src/components/portfolio/SortableImageItem.tsx
|
|
"use client";
|
|
|
|
import { PortfolioImage } from "@/generated/prisma";
|
|
import { useSortable } from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import Image from "next/image";
|
|
|
|
interface Props {
|
|
id: string;
|
|
image: PortfolioImage;
|
|
}
|
|
|
|
export default function SortableImageItem({ id, image }: Props) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({ id });
|
|
|
|
const style = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
opacity: isDragging ? 0.4 : 1,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
{...attributes}
|
|
{...listeners}
|
|
style={style}
|
|
className="bg-white rounded border overflow-hidden shadow hover:shadow-md transition"
|
|
>
|
|
<Image
|
|
src={`/api/image/thumbnail/${image.fileKey}.wepb`}
|
|
alt={image.altText ?? image.name}
|
|
width={300}
|
|
height={200}
|
|
className="object-cover w-full h-48"
|
|
/>
|
|
<div className="px-2 py-1 text-sm text-center truncate">{image.name}</div>
|
|
</div>
|
|
);
|
|
}
|