Tabs#

import { Tabs } from '@sigx/terminal';
import type { TabOption } from '@sigx/terminal';

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

const tabs: TabOption[] = [
    { label: 'Overview', value: 'overview' },
    { label: 'Logs', value: 'logs' },
    { label: 'Settings', value: 'settings' },
];

const App = component(() => {
    const active = signal('overview');
    return () => (
        <box border="rounded" label="Panel">
            <Tabs options={tabs} model={() => active} autofocus onChange={(v) => console.log(v)} />
            <br />
            <text>Active: {active.value}</text>
        </box>
    );
});

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

interface TabOption<T = string> {
    label: string;
    value: T;
}