Pagination

const { default: Join } = await import('/components/layout/join.js');
const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, span } = tags;

const page = signal(1);
const totalPages = 5;

const demo = div({ style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center' },
    Join({},
        Button({ 
            class: 'join-item',
            onclick: () => { if(page.value > 1) page.value--; }
        }, '«'),
        ...Array.from({ length: totalPages }, (_, i) => 
            Button({ 
                class: 'join-item',
                color: () => page.value === i + 1 ? 'primary' : undefined,
                onclick: () => { page.value = i + 1; }
            }, i + 1)
        ),
        Button({ 
            class: 'join-item',
            onclick: () => { if(page.value < totalPages) page.value++; }
        }, '»')
    ),
    span({ class: 'text-sm opacity-70' }, () => `Page ${page.value} of ${totalPages}`)
);

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

const { default: Join } = await import('/components/layout/join.js');
const { default: Button } = await import('/components/actions/button.js');
const { signal, $ } = Lightview;

const page = signal(1);
const totalPages = 5;

const demo = {
    tag: 'div',
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center' },
    children: [
        {
            tag: Join,
            children: [
                {
                    tag: Button,
                    attributes: { class: 'join-item', onclick: () => { if (page.value > 1) page.value--; } },
                    children: ['«']
                },
                ...Array.from({ length: totalPages }, (_, i) => ({
                    tag: Button,
                    attributes: {
                        class: 'join-item',
                        color: () => page.value === i + 1 ? 'primary' : undefined,
                        onclick: () => { page.value = i + 1; }
                    },
                    children: [i + 1]
                })),
                {
                    tag: Button,
                    attributes: { class: 'join-item', onclick: () => { if (page.value < totalPages) page.value++; } },
                    children: ['»']
                }
            ]
        },
        { tag: 'span', attributes: { class: 'text-sm opacity-70' }, children: [() => `Page ${page.value} of ${totalPages}`] }
    ]
};

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

const { default: Join } = await import('/components/layout/join.js');
const { default: Button } = await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
tags.Join = Join;
tags.Button = Button;

const page = signal(1);
const totalPages = 5;

const demo = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem; align-items: center',
        children: [
            {
                Join: {
                    children: [
                        { Button: { class: 'join-item', onclick: () => { if (page.value > 1) page.value--; }, children: ['«'] } },
                        ...Array.from({ length: totalPages }, (_, i) => ({
                            Button: {
                                class: 'join-item',
                                color: () => page.value === i + 1 ? 'primary' : undefined,
                                onclick: () => { page.value = i + 1; },
                                children: [i + 1]
                            }
                        })),
                        { Button: { class: 'join-item', onclick: () => { if (page.value < totalPages) page.value++; }, children: ['»'] } }
                    ]
                }
            },
            { span: { class: 'text-sm opacity-70', children: [() => `Page ${page.value} of ${totalPages}`] } }
        ]
    }
};

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