Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* ComponentPalette — sidebar listing available widgets and cards to drag in.
*/
import type {WidgetType} from '@feasibleone/blong';
import {useDesignMode} from './useDesignMode.js';
const WIDGET_TYPES: Array<{type: WidgetType; icon: string; label: string}> = [
{type: 'input', icon: 'pi-pencil', label: 'Text Input'},
{type: 'textArea', icon: 'pi-align-left', label: 'Textarea'},
{type: 'number', icon: 'pi-hashtag', label: 'Number'},
{type: 'boolean', icon: 'pi-check-square', label: 'Boolean'},
{type: 'date', icon: 'pi-calendar', label: 'Date'},
{type: 'dropdown', icon: 'pi-chevron-down', label: 'Dropdown'},
{type: 'multiSelect', icon: 'pi-list', label: 'Multi Select'},
{type: 'table', icon: 'pi-table', label: 'Table'},
{type: 'file', icon: 'pi-upload', label: 'File Upload'},
{type: 'image', icon: 'pi-image', label: 'Image'},
{type: 'code', icon: 'pi-code', label: 'Code'},
];
export function ComponentPalette() {
const {active} = useDesignMode();
if (!active) return null;
return (
<div className="blong-component-palette">
<section className="blong-component-palette__section">
<h4 className="blong-component-palette__heading">Widgets</h4>
<ul className="blong-component-palette__list">
{WIDGET_TYPES.map(({type, icon, label}) => (
<li
key={type}
className="blong-component-palette__item"
draggable
data-widget-type={type}
>
<i className={`pi ${icon}`} />
<span>{label}</span>
</li>
))}
</ul>
</section>
<section className="blong-component-palette__section">
<h4 className="blong-component-palette__heading">Layout</h4>
<ul className="blong-component-palette__list">
<li
className="blong-component-palette__item"
draggable
data-element-type="card"
>
<i className="pi pi-stop" />
<span>New Card</span>
</li>
</ul>
</section>
</div>
);
}
|