Select#

import { Select } from '@sigx/terminal';
import type { SelectOption } from '@sigx/terminal';

/** @jsxImportSource @sigx/terminal */
import { component, defineApp, signal, Select } from '@sigx/terminal';
import type { SelectOption } from '@sigx/terminal';

const options: SelectOption[] = [
    { label: 'Development', value: 'dev', description: 'Local dev build' },
    { label: 'Staging', value: 'staging', description: 'Pre-production' },
    { label: 'Production', value: 'prod', description: 'Live environment' },
];

const App = component(() => {
    const env = signal('dev');
    return () => (
        <box border="rounded" label="Deploy target">
            <Select
                options={options}
                model={() => env}
                label="Environment"
                showDescription
                autofocus
                onChange={(v) => console.log('selected:', v)}
                onSubmit={(v) => console.log('confirmed:', v)}
            />
            <br />
            <text>Target: {env.value}</text>
        </box>
    );
});

defineApp(<App />).mount({ clearConsole: true });

interface SelectOption<T = string> {
    label: string;
    value: T;
    description?: string;
}