49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useDrag } from "react-dnd";
|
|
import { Type, Table, Tag } from "lucide-react";
|
|
|
|
interface ComponentItem {
|
|
type: string;
|
|
label: string;
|
|
icon: React.ReactNode;
|
|
}
|
|
|
|
const COMPONENTS: ComponentItem[] = [
|
|
{ type: "text", label: "텍스트", icon: <Type className="h-4 w-4" /> },
|
|
{ type: "table", label: "테이블", icon: <Table className="h-4 w-4" /> },
|
|
{ type: "label", label: "레이블", icon: <Tag className="h-4 w-4" /> },
|
|
];
|
|
|
|
function DraggableComponentItem({ type, label, icon }: ComponentItem) {
|
|
const [{ isDragging }, drag] = useDrag(() => ({
|
|
type: "component",
|
|
item: { componentType: type },
|
|
collect: (monitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
}),
|
|
}));
|
|
|
|
return (
|
|
<div
|
|
ref={drag}
|
|
className={`flex cursor-move items-center gap-2 rounded border p-2 text-sm transition-all hover:border-blue-500 hover:bg-blue-50 ${
|
|
isDragging ? "opacity-50" : ""
|
|
}`}
|
|
>
|
|
{icon}
|
|
<span>{label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ComponentPalette() {
|
|
return (
|
|
<div className="space-y-2">
|
|
{COMPONENTS.map((component) => (
|
|
<DraggableComponentItem key={component.type} {...component} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|