tabler/shared/components/demo/DataSelect.astro

---
// Demo select fed from @data/selects.json (+ people) — the data-lookup sugar
// extracted from ui/Select; builds the option list and delegates rendering.
import selects from '@data/selects.json';
import { people } from '@shared/lib/people'
import type { FormValidationState } from '@shared/lib/tokens';
import { firstLetters } from '@shared/lib/string-format';
import Select from '@ui/Select.astro';
import type { SelectOption, SelectOptgroup } from '@ui/Select.astro';

interface Props {
	id?: string;
	/** key into @data/selects.json (default 'people') */
	key?: string;
	class?: string;
	state?: FormValidationState | undefined;
	placeholder?: string;
	/** option decoration: 'avatar' | 'flag' | 'label' */
	indicator?: string;
	/** plain value list — overrides the selects.json lookup */
	values?: string[];
}

const {
	id: idProp,
	key: keyProp,
	class: className,
	state,
	placeholder,
	indicator,
	values,
} = Astro.props;

const id = idProp ?? keyProp;
const key = keyProp ?? 'people';
const data = (selects as Record<string, any>)[key] ?? {};

const isMultiple = Boolean(data.multiple);

// Build the option list.
let options: SelectOption[] = [];
let optgroups: SelectOptgroup[] = [];

if (values) {
	options = values.map((v) => ({ value: v, text: v }));
} else if (data.data === 'people') {
	options = people.slice(0, 20).map((person) => {
		let custom: string | undefined;
		if (indicator === 'avatar') {
			custom = person.photo
				? `<span class="avatar avatar-xs" style="background-image: url(./${person.photo})"></span>`
				: `<span class="avatar avatar-xs">${firstLetters(person.full_name ?? '')}</span>`;
		}
		return { value: String(person.id), text: person.full_name ?? '', custom };
	});
} else if (data.data === 'optgroup') {
	optgroups = (data.options as { title: string; options: string[] }[]).map((group) => ({
		label: group.title,
		options: group.options.map((option) => ({ value: option, text: option })),
	}));
} else if (Array.isArray(data.options)) {
	options = (data.options as string[]).map((option) => ({ value: option, text: option }));
} else if (data.options) {
	// object of { key: { name, flag?, label?, selected? } } — with optional indicator
	options = Object.entries(data.options as Record<string, any>).map(([optKey, v]) => {
		let custom: string | undefined;
		if (indicator === 'flag') custom = `<span class="flag flag-xs flag-country-${v.flag}"></span>`;
		else if (indicator === 'label') custom = `<span class="badge bg-primary-lt">${v.label}</span>`;
		return { value: optKey, text: v.name, custom, selected: Boolean(v.selected) };
	});
}
---

{id && <Select id={id} class={className} state={state} placeholder={placeholder} multiple={isMultiple} options={options} optgroups={optgroups} />}