Indicator

await import('/components/layout/indicator.js');
await import('/components/data-display/badge.js');
await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, img, Indicator, Badge, Button } = tags;

const count = signal(3);

const demo = div({ style: 'display: flex; gap: 2rem' },
    Indicator({},
        Indicator.Item({},
            Badge({ color: 'primary' }, () => count.value)
        ),
        Button({ 
            onclick: () => { count.value++; }
        }, 'Messages')
    ),
    Indicator({},
        Indicator.Item({ position: 'bottom-end' },
            Badge({ color: 'success', size: 'xs' })
        ),
        div({ class: 'avatar' },
            div({ class: 'w-12 rounded-full' },
                img({ src: 'https://i.pravatar.cc/100?img=5' })
            )
        )
    )
);

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

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

const count = signal(3);

const demo = {
    tag: div,
    attributes: { style: 'display: flex; gap: 2rem' },
    children: [
        {
            tag: Indicator,
            children: [
                {
                    tag: Indicator.Item,
                    children: [{ tag: Badge, attributes: { color: 'primary' }, children: [() => count.value] }]
                },
                {
                    tag: Button,
                    attributes: { onclick: () => { count.value++; } },
                    children: ['Messages']
                }
            ]
        },
        {
            tag: Indicator,
            children: [
                {
                    tag: Indicator.Item,
                    attributes: { position: 'bottom-end' },
                    children: [{ tag: Badge, attributes: { color: 'success', size: 'xs' } }]
                },
                {
                    tag: div,
                    attributes: { class: 'avatar' },
                    children: [
                        {
                            tag: div,
                            attributes: { class: 'w-12 rounded-full' },
                            children: [{ tag: img, attributes: { src: 'https://i.pravatar.cc/100?img=5' } }]
                        }
                    ]
                }
            ]
        }
    ]
};

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

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

const count = signal(3);

const demo = {
    div: {
        style: 'display: flex; gap: 2rem',
        children: [
            {
                Indicator: {
                    children: [
                        {
                            'Indicator.Item': {
                                children: [{ Badge: { color: 'primary', children: [() => count.value] } }]
                            }
                        },
                        {
                            Button: {
                                onclick: () => { count.value++; },
                                children: ['Messages']
                            }
                        }
                    ]
                }
            },
            {
                Indicator: {
                    children: [
                        {
                            'Indicator.Item': {
                                position: 'bottom-end',
                                children: [{ Badge: { color: 'success', size: 'xs' } }]
                            }
                        },
                        {
                            div: {
                                class: 'avatar',
                                children: [
                                    {
                                        div: {
                                            class: 'w-12 rounded-full',
                                            children: [{ img: { src: 'https://i.pravatar.cc/100?img=5' } }]
                                        }
                                    }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
};

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

<script type="module" src="/components/layout/indicator.js"></script>
<script type="module" src="/components/data-display/badge.js"></script>
<script type="module" src="/components/actions/button.js"></script>

<div style="display: flex; gap: 2rem">
    <lv-indicator>
        <item class="badge badge-primary">3</item>
        <lv-button>Messages</lv-button>
    </lv-indicator>

    <lv-indicator>
        <item position="bottom-end" class="badge badge-success badge-xs"></item>
        <div class="avatar">
            <div class="w-12 rounded-full">
                <img src="https://i.pravatar.cc/100?img=5" />
            </div>
        </div>
    </lv-indicator>
</div>