Dropdown

await import('/components/actions/dropdown.js');
const { tags, $ } = Lightview;
const { div, Dropdown } = tags;

// Basic dropdown
const dropdown = Dropdown({},
    Dropdown.Trigger({}, 'Click me'),
    Dropdown.Content({},
        Dropdown.Item({}, 'Profile'),
        Dropdown.Item({}, 'Settings'),
        Dropdown.Item({}, 'Logout')
    )
);

$('#example').content(div({ style: 'height: 10rem;' }, dropdown));

await import('/components/actions/dropdown.js');
const { $, tags } = Lightview;
const { Dropdown, div } = tags;

const dropdown = {
    tag: Dropdown,
    children: [
        { tag: Dropdown.Trigger, children: ['Click me'] },
        {
            tag: Dropdown.Content,
            children: [
                { tag: Dropdown.Item, children: ['Profile'] },
                { tag: Dropdown.Item, children: ['Settings'] },
                { tag: Dropdown.Item, children: ['Logout'] }
            ]
        }
    ]
};

$('#example').content({ tag: div, attributes: { style: 'height: 10rem;' }, children: [dropdown] });

await import('/components/actions/dropdown.js');
const { $ } = Lightview;

const dropdown = {
    Dropdown: {
        children: [
            { 'Dropdown.Trigger': { children: ['Click me'] } },
            {
                'Dropdown.Content': {
                    children: [
                        { 'Dropdown.Item': { children: ['Profile'] } },
                        { 'Dropdown.Item': { children: ['Settings'] } },
                        { 'Dropdown.Item': { children: ['Logout'] } }
                    ]
                }
            }
        ]
    }
};

$('#example').content({ div: { style: 'height: 10rem;', children: [dropdown] } });

await import('/components/actions/dropdown.js');
const { signal, tags, $ } = Lightview;
const { div, span, Dropdown } = tags;

const selected = signal('Select an option');
const options = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape'];

const dropdown = Dropdown({},
    Dropdown.Trigger({ class: 'btn-primary' }, 
        () => selected.value
    ),
    Dropdown.Content({},
        ...options.map(opt => 
            Dropdown.Item({ 
                onclick: () => { selected.value = opt; }
            }, opt)
        )
    )
);

const demo = div({ style: 'display: flex; gap: 1rem; align-items: center; height: 12rem;' },
    dropdown,
    span({ style: 'font-size: 0.875rem; opacity: 0.7;' }, 
        () => `Selected: ${selected.value}`
    )
);

$('#example').content(demo);

await import('/components/actions/dropdown.js');
const { signal, $, tags } = Lightview;
const { Dropdown, div, span } = tags;

const selected = signal('Select an option');
const options = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape'];

const dropdown = {
    tag: Dropdown,
    children: [
        {
            tag: Dropdown.Trigger,
            attributes: { class: 'btn-primary' },
            children: [() => selected.value]
        },
        {
            tag: Dropdown.Content,
            children: options.map(opt => ({
                tag: Dropdown.Item,
                attributes: { onclick: () => { selected.value = opt; } },
                children: [opt]
            }))
        }
    ]
};

const demo = {
    tag: div,
    attributes: { style: 'display: flex; gap: 1rem; align-items: center; height: 12rem;' },
    children: [
        dropdown,
        {
            tag: span,
            attributes: { style: 'font-size: 0.875rem; opacity: 0.7;' },
            children: [() => `Selected: ${selected.value}`]
        }
    ]
};

$('#example').content(demo);

await import('/components/actions/dropdown.js');
const { signal, $ } = Lightview;

const selected = signal('Select an option');
const options = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape'];

const dropdown = {
    Dropdown: {
        children: [
            {
                'Dropdown.Trigger': {
                    class: 'btn-primary',
                    children: [() => selected.value]
                }
            },
            {
                'Dropdown.Content': {
                    children: options.map(opt => ({
                        'Dropdown.Item': {
                            onclick: () => { selected.value = opt; },
                            children: [opt]
                        }
                    }))
                }
            }
        ]
    }
};

const demo = {
    div: {
        style: 'display: flex; gap: 1rem; align-items: center; height: 12rem;',
        children: [
            dropdown,
            { span: { style: 'font-size: 0.875rem; opacity: 0.7;', children: [() => `Selected: ${selected.value}`] } }
        ]
    }
};

$('#example').content(demo);