63 lines
2 KiB
TypeScript
63 lines
2 KiB
TypeScript
import React from 'react';
|
||
import { useDraggableComponent } from '../hooks/useDragDrop';
|
||
|
||
interface ComponentPaletteProps {
|
||
onComponentSelect?: (componentType: string) => void;
|
||
}
|
||
|
||
const DraggableComponentItem: React.FC<{
|
||
componentType: string;
|
||
icon?: string;
|
||
label?: string;
|
||
onSelect?: (type: string) => void;
|
||
}> = ({ componentType, icon, label, onSelect }) => {
|
||
const { drag, isDragging } = useDraggableComponent(componentType);
|
||
|
||
return (
|
||
<div
|
||
ref={drag}
|
||
data-testid={`palette-item-${componentType.toLowerCase()}`}
|
||
className={`palette-item ${isDragging ? 'dragging' : ''}`}
|
||
onClick={() => onSelect?.(componentType)}
|
||
style={{ opacity: isDragging ? 0.5 : 1, cursor: 'move' }}
|
||
>
|
||
{icon && <span className="palette-icon">{icon}</span>}
|
||
<span className="palette-label">{label || componentType}</span>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export const ComponentPalette: React.FC<ComponentPaletteProps> = ({
|
||
onComponentSelect,
|
||
}) => {
|
||
const components = [
|
||
{ type: 'Button', icon: '🔘', label: 'Button' },
|
||
{ type: 'Heading', icon: '📝', label: 'Heading' },
|
||
{ type: 'Paragraph', icon: '📄', label: 'Paragraph' },
|
||
{ type: 'Image', icon: '🖼️', label: 'Image' },
|
||
{ type: 'Container', icon: '📦', label: 'Container' },
|
||
{ type: 'Section', icon: '📑', label: 'Section' },
|
||
{ type: 'Row', icon: '↔️', label: 'Row' },
|
||
{ type: 'Column', icon: '↕️', label: 'Column' },
|
||
{ type: 'Divider', icon: '➖', label: 'Divider' },
|
||
{ type: 'Spacer', icon: '⬜', label: 'Spacer' },
|
||
];
|
||
|
||
return (
|
||
<div data-testid="component-palette" className="component-palette">
|
||
<h3>Components</h3>
|
||
<div className="component-list">
|
||
{components.map((comp) => (
|
||
<DraggableComponentItem
|
||
key={comp.type}
|
||
componentType={comp.type}
|
||
icon={comp.icon}
|
||
label={comp.label}
|
||
onSelect={onComponentSelect}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|