Toast

await import('/components/data-display/toast.js');
await import('/components/data-display/alert.js');

const { tags, $ } = Lightview;
const { span, Toast, Alert } = tags;

// Toast positioned at bottom-end (default)
const toast = Toast({ position: 'end', vertical: 'bottom' },
    Alert({ color: 'success', icon: 'success' },
        span({}, 'Message sent successfully!')
    )
);

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

await import('/components/data-display/toast.js');
await import('/components/data-display/alert.js');
const { $, tags } = Lightview;
const { Toast, Alert, span } = tags;

const toast = {
    tag: Toast,
    attributes: { position: 'end', vertical: 'bottom' },
    children: [
        {
            tag: Alert,
            attributes: { color: 'success', icon: 'success' },
            children: [{ tag: span, children: ['Message sent successfully!'] }]
        }
    ]
};

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

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

const toast = {
    Toast: {
        position: 'end',
        vertical: 'bottom',
        children: [
            {
                Alert: {
                    color: 'success',
                    icon: 'success',
                    children: [
                        { span: { children: ['Message sent successfully!'] } }
                    ]
                }
            }
        ]
    }
};

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

await import('/components/data-display/toast.js');
await import('/components/data-display/alert.js');
await import('/components/actions/button.js');

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

const notifications = signal([]);
let id = 0;

const addNotification = (type) => {
    const messages = {
        success: '✓ Action completed!',
        info: 'ℹ️ New update available',
        warning: '⚠️ Please review',
        error: '✕ Something went wrong'
    };
    const newId = ++id;
    notifications.value = [...notifications.value, { id: newId, type, msg: messages[type] }];
    // Auto-remove after 3 seconds
    setTimeout(() => {
        notifications.value = notifications.value.filter(n => n.id !== newId);
    }, 3000);
};

const demo = div({},
    div({ style: 'display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem' },
        Button({ color: 'success', size: 'sm', onclick: () => addNotification('success') }, 'Success'),
        Button({ color: 'info', size: 'sm', onclick: () => addNotification('info') }, 'Info'),
        Button({ color: 'warning', size: 'sm', onclick: () => addNotification('warning') }, 'Warning'),
        Button({ color: 'error', size: 'sm', onclick: () => addNotification('error') }, 'Error')
    ),
    () => Toast({ position: 'end', vertical: 'top' },
        ...notifications.value.map(n => 
            Alert({ color: n.type, key: n.id }, span({}, n.msg))
        )
    )
);

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

await import('/components/data-display/toast.js');
await import('/components/data-display/alert.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { Toast, Alert, Button, div, span } = tags;

const notifications = signal([]);
let id = 0;

const addNotification = (type) => {
    const messages = {
        success: '✓ Action completed!',
        info: 'ℹ️ New update available',
        warning: '⚠️ Please review',
        error: '✕ Something went wrong'
    };
    const newId = ++id;
    notifications.value = [...notifications.value, { id: newId, type, msg: messages[type] }];
    setTimeout(() => {
        notifications.value = notifications.value.filter(n => n.id !== newId);
    }, 3000);
};

const demo = {
    tag: div,
    children: [
        {
            tag: div,
            attributes: { style: 'display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem' },
            children: [
                { tag: Button, attributes: { color: 'success', size: 'sm', onclick: () => addNotification('success') }, children: ['Success'] },
                { tag: Button, attributes: { color: 'info', size: 'sm', onclick: () => addNotification('info') }, children: ['Info'] },
                { tag: Button, attributes: { color: 'warning', size: 'sm', onclick: () => addNotification('warning') }, children: ['Warning'] },
                { tag: Button, attributes: { color: 'error', size: 'sm', onclick: () => addNotification('error') }, children: ['Error'] }
            ]
        },
        () => ({
            tag: Toast,
            attributes: { position: 'end', vertical: 'top' },
            children: notifications.value.map(n => ({
                tag: Alert,
                attributes: { color: n.type, key: n.id },
                children: [{ tag: span, children: [n.msg] }]
            }))
        })
    ]
};

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

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

const notifications = signal([]);
let id = 0;

const addNotification = (type) => {
    const messages = {
        success: '✓ Action completed!',
        info: 'ℹ️ New update available',
        warning: '⚠️ Please review',
        error: '✕ Something went wrong'
    };
    const newId = ++id;
    notifications.value = [...notifications.value, { id: newId, type, msg: messages[type] }];
    setTimeout(() => {
        notifications.value = notifications.value.filter(n => n.id !== newId);
    }, 3000);
};

const demo = {
    div: {
        children: [
            {
                div: {
                    style: 'display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem',
                    children: [
                        { Button: { color: 'success', size: 'sm', onclick: () => addNotification('success'), children: ['Success'] } },
                        { Button: { color: 'info', size: 'sm', onclick: () => addNotification('info'), children: ['Info'] } },
                        { Button: { color: 'warning', size: 'sm', onclick: () => addNotification('warning'), children: ['Warning'] } },
                        { Button: { color: 'error', size: 'sm', onclick: () => addNotification('error'), children: ['Error'] } }
                    ]
                }
            },
            () => ({
                Toast: {
                    position: 'end',
                    vertical: 'top',
                    children: notifications.value.map(n => ({
                        Alert: {
                            color: n.type,
                            key: n.id,
                            children: [
                                { span: { children: [n.msg] } }
                            ]
                        }
                    }))
                }
            })
        ]
    }
};

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