Badge

await import('/components/data-display/badge.js');
const { tags, $ } = Lightview;
const { div, Badge } = tags;

const badges = div({ style: 'display: flex; flex-direction: column; gap: 1rem;' },
    // Colors
    div({ style: 'display: flex; flex-direction: row; gap: 0.5rem;' },
        Badge({}, 'Default'),
        Badge({ color: 'primary' }, 'Primary'),
        Badge({ color: 'secondary' }, 'Secondary'),
        Badge({ color: 'accent' }, 'Accent'),
        Badge({ color: 'info' }, 'Info'),
        Badge({ color: 'success' }, 'Success'),
        Badge({ color: 'warning' }, 'Warning'),
        Badge({ color: 'error' }, 'Error')
    ),
    // Variants
    div({ style: 'display: flex; flex-direction: row; gap: 0.5rem;' },
        Badge({ variant: 'outline' }, 'Outline'),
        Badge({ variant: 'soft', color: 'primary' }, 'Soft'),
        Badge({ variant: 'dash', color: 'secondary' }, 'Dash')
    )
);

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

await import('/components/data-display/badge.js');
const { $, tags } = Lightview;
const { Badge, div } = tags;

const badges = {
    tag: div,
    attributes: { style: 'display: flex; flex-direction: column; gap: 0.5rem;' },
    children: [
        {
            tag: div,
            attributes: { style: 'display: flex; flex-direction: row; gap: 0.5rem;' },
            children: [
                { tag: Badge, children: ['Default'] },
                { tag: Badge, attributes: { color: 'primary' }, children: ['Primary'] },
                { tag: Badge, attributes: { color: 'secondary' }, children: ['Secondary'] },
                { tag: Badge, attributes: { color: 'accent' }, children: ['Accent'] },
                { tag: Badge, attributes: { color: 'info' }, children: ['Info'] },
                { tag: Badge, attributes: { color: 'success' }, children: ['Success'] },
                { tag: Badge, attributes: { color: 'warning' }, children: ['Warning'] },
                { tag: Badge, attributes: { color: 'error' }, children: ['Error'] }
            ]
        },
        {
            tag: div,
            attributes: { style: 'display: flex; flex-direction: row; gap: 0.5rem;' },
            children: [
                { tag: Badge, attributes: { variant: 'outline' }, children: ['Outline'] },
                { tag: Badge, attributes: { variant: 'soft', color: 'primary' }, children: ['Soft'] },
                { tag: Badge, attributes: { variant: 'dash', color: 'secondary' }, children: ['Dash'] }
            ]
        }
    ]
};

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

await import('/components/data-display/badge.js');
const { $ } = Lightview;

const badges = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 0.5rem;',
        children: [
            {
                div: {
                    style: 'display: flex; flex-direction: row; gap: 0.5rem;',
                    children: [
                        { Badge: { children: ['Default'] } },
                        { Badge: { color: 'primary', children: ['Primary'] } },
                        { Badge: { color: 'secondary', children: ['Secondary'] } },
                        { Badge: { color: 'accent', children: ['Accent'] } },
                        { Badge: { color: 'info', children: ['Info'] } },
                        { Badge: { color: 'success', children: ['Success'] } },
                        { Badge: { color: 'warning', children: ['Warning'] } },
                        { Badge: { color: 'error', children: ['Error'] } }
                    ]
                }
            },
            {
                div: {
                    style: 'display: flex; flex-direction: row; gap: 0.5rem;',
                    children: [
                        { Badge: { variant: 'outline', children: ['Outline'] } },
                        { Badge: { variant: 'soft', color: 'primary', children: ['Soft'] } },
                        { Badge: { variant: 'dash', color: 'secondary', children: ['Dash'] } }
                    ]
                }
            }
        ]
    }
};

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

<!-- Import the component (registers lv-badge) -->
<script type="module" src="/components/data-display/badge.js"></script>

<div style="display: flex; flex-direction: column; gap: 0.5rem;">
    <div style="display: flex; gap: 0.5rem;">
        <lv-badge>Default</lv-badge>
        <lv-badge color="primary">Primary</lv-badge>
        <lv-badge color="secondary">Secondary</lv-badge>
        <lv-badge color="accent">Accent</lv-badge>
    </div>
    <div style="display: flex; gap: 0.5rem;">
        <lv-badge variant="outline">Outline</lv-badge>
        <lv-badge variant="soft" color="primary">Soft</lv-badge>
    </div>
</div>

await import('/components/data-display/badge.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, Badge, Button } = tags;

const count = signal(5);

const demo = div({ style: 'display: flex; flex-direction: row; gap: 0.5rem;' },
    Button({ 
        size: 'sm', 
        color: 'primary',
        onclick: () => { count.value++; }
    }, '+ Add Message'),
    
    Button({},
        'Inbox',
        Badge({ 
            color: 'secondary',
            style: 'margin-left: 0.5rem;'
        }, () => count.value > 99 ? '99+' : count.value)
    ),
    
    Button({ 
        size: 'sm',
        onclick: () => { count.value = 0; }
    }, 'Clear')
);

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

await import('/components/data-display/badge.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, Badge, Button } = tags;

const count = signal(5);

const demo = {
    tag: div,
    attributes: { style: 'display: flex; flex-direction: row; gap: 0.5rem;' },
    children: [
        {
            tag: Button,
            attributes: { size: 'sm', color: 'primary', onclick: () => { count.value++; } },
            children: ['+ Add Message']
        },
        {
            tag: Button,
            children: [
                'Inbox',
                {
                    tag: Badge,
                    attributes: { color: 'secondary', style: 'margin-left: 0.5rem;' },
                    children: [() => count.value > 99 ? '99+' : count.value]
                }
            ]
        },
        {
            tag: Button,
            attributes: { size: 'sm', onclick: () => { count.value = 0; } },
            children: ['Clear']
        }
    ]
};

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

await import('/components/data-display/badge.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;

const count = signal(5);

const demo = {
    div: {
        style: 'display: flex; flex-direction: row; gap: 0.5rem;',
        children: [
            {
                Button: {
                    size: 'sm',
                    color: 'primary',
                    onclick: () => { count.value++; },
                    children: ['+ Add Message']
                }
            },
            {
                Button: {
                    children: [
                        'Inbox',
                        {
                            Badge: {
                                color: 'secondary',
                                style: 'margin-left: 0.5rem;',
                                children: [() => count.value > 99 ? '99+' : count.value]
                            }
                        }
                    ]
                }
            },
            {
                Button: {
                    size: 'sm',
                    onclick: () => { count.value = 0; },
                    children: ['Clear']
                }
            }
        ]
    }
};

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