Footer

await import('/components/layout/footer.js');
const { tags, $ } = Lightview;
const { a, Footer } = tags;

const footer = Footer({ class: 'bg-neutral text-neutral-content p-10 rounded-box' },
    Footer.Nav({},
        Footer.Title({}, 'Services'),
        a({ class: 'link link-hover' }, 'Branding'),
        a({ class: 'link link-hover' }, 'Design'),
        a({ class: 'link link-hover' }, 'Marketing')
    ),
    Footer.Nav({},
        Footer.Title({}, 'Company'),
        a({ class: 'link link-hover' }, 'About us'),
        a({ class: 'link link-hover' }, 'Contact'),
        a({ class: 'link link-hover' }, 'Jobs')
    ),
    Footer.Nav({},
        Footer.Title({}, 'Legal'),
        a({ class: 'link link-hover' }, 'Terms of use'),
        a({ class: 'link link-hover' }, 'Privacy policy')
    )
);

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

await import('/components/layout/footer.js');
const { $, tags } = Lightview;
const { Footer, a } = tags;

const footer = {
    tag: Footer,
    attributes: { class: 'bg-neutral text-neutral-content p-10 rounded-box' },
    children: [
        {
            tag: Footer.Nav,
            children: [
                { tag: Footer.Title, children: ['Services'] },
                { tag: a, attributes: { class: 'link link-hover' }, children: ['Branding'] },
                { tag: a, attributes: { class: 'link link-hover' }, children: ['Design'] },
                { tag: a, attributes: { class: 'link link-hover' }, children: ['Marketing'] }
            ]
        },
        {
            tag: Footer.Nav,
            children: [
                { tag: Footer.Title, children: ['Company'] },
                { tag: a, attributes: { class: 'link link-hover' }, children: ['About us'] },
                { tag: a, attributes: { class: 'link link-hover' }, children: ['Contact'] },
                { tag: a, attributes: { class: 'link link-hover' }, children: ['Jobs'] }
            ]
        },
        {
            tag: Footer.Nav,
            children: [
                { tag: Footer.Title, children: ['Legal'] },
                { tag: a, attributes: { class: 'link link-hover' }, children: ['Terms of use'] },
                { tag: a, attributes: { class: 'link link-hover' }, children: ['Privacy policy'] }
            ]
        }
    ]
};

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

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

const footer = {
    Footer: {
        class: 'bg-neutral text-neutral-content p-10 rounded-box',
        children: [
            {
                'Footer.Nav': {
                    children: [
                        { 'Footer.Title': { children: ['Services'] } },
                        { a: { class: 'link link-hover', children: ['Branding'] } },
                        { a: { class: 'link link-hover', children: ['Design'] } },
                        { a: { class: 'link link-hover', children: ['Marketing'] } }
                    ]
                }
            },
            {
                'Footer.Nav': {
                    children: [
                        { 'Footer.Title': { children: ['Company'] } },
                        { a: { class: 'link link-hover', children: ['About us'] } },
                        { a: { class: 'link link-hover', children: ['Contact'] } },
                        { a: { class: 'link link-hover', children: ['Jobs'] } }
                    ]
                }
            },
            {
                'Footer.Nav': {
                    children: [
                        { 'Footer.Title': { children: ['Legal'] } },
                        { a: { class: 'link link-hover', children: ['Terms of use'] } },
                        { a: { class: 'link link-hover', children: ['Privacy policy'] } }
                    ]
                }
            }
        ]
    }
};

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