59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import styles from './Palette.module.css';
|
|
import type { ComponentType } from '../../../types/project';
|
|
|
|
// ── Palette item definitions ──────────────────────────────────────────────────
|
|
|
|
type PaletteItem = {
|
|
type: ComponentType;
|
|
label: string;
|
|
description: string;
|
|
};
|
|
|
|
const PALETTE_ITEMS: PaletteItem[] = [
|
|
{ type: 'Label', label: 'Label', description: 'Static text' },
|
|
{ type: 'Button', label: 'Button', description: 'Clickable action' },
|
|
{ type: 'TextInput', label: 'Text Input', description: 'Single-line input' },
|
|
{ type: 'JsonViewer', label: 'JSON Viewer', description: 'Formatted JSON' },
|
|
{ type: 'TextArea', label: 'Text Area', description: 'Multi-line input' },
|
|
{ type: 'Checkbox', label: 'Checkbox', description: 'Boolean input' },
|
|
{ type: 'RadioGroup', label: 'Radio Group', description: 'Single choice' },
|
|
{ type: 'Dropdown', label: 'Dropdown', description: 'Option selector' },
|
|
{ type: 'Table', label: 'Table', description: 'Data table' },
|
|
{ type: 'StatusPanel',label: 'Status Panel',description: 'Status message' },
|
|
{ type: 'Container', label: 'Card', description: 'Content container' },
|
|
];
|
|
|
|
// ── Props ─────────────────────────────────────────────────────────────────────
|
|
|
|
type PaletteProps = {
|
|
onAdd: (type: ComponentType) => void;
|
|
};
|
|
|
|
// ── Component ─────────────────────────────────────────────────────────────────
|
|
|
|
function Palette({ onAdd }: PaletteProps): React.ReactElement {
|
|
return (
|
|
<aside className={styles.palette}>
|
|
<div className={styles.header}>Components</div>
|
|
<ul className={styles.list}>
|
|
{PALETTE_ITEMS.map((item) => (
|
|
<li key={item.type}>
|
|
<button
|
|
className={styles.item}
|
|
onClick={() => onAdd(item.type)}
|
|
title={`Add ${item.label} to canvas`}
|
|
>
|
|
<span className={styles.itemLabel}>{item.label}</span>
|
|
<span className={styles.itemDesc}>{item.description}</span>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className={styles.hint}>Click a component to add it to the canvas</div>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
export default Palette;
|