Kbd

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

const shortcuts = div({ style: 'display: flex; flex-direction: column; gap: 1rem' },
    div({ style: 'display: flex; gap: 0.5rem; align-items: center' },
        span({}, 'Save: '),
        Kbd({}, '⌘'),
        Kbd({}, 'S')
    ),
    div({ style: 'display: flex; gap: 0.5rem; align-items: center' },
        span({}, 'Undo: '),
        Kbd({}, '⌘'),
        Kbd({}, 'Z')
    ),
    div({ style: 'display: flex; gap: 0.5rem; align-items: center' },
        span({}, 'Copy: '),
        Kbd({}, '⌘'),
        Kbd({}, 'C')
    )
);

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

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

const shortcuts = {
    tag: 'div',
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem' },
    children: [
        {
            tag: 'div',
            attributes: { style: 'display: flex; gap: 0.5rem; align-items: center' },
            children: [
                { tag: 'span', children: ['Save: '] },
                { tag: Kbd, children: ['⌘'] },
                { tag: Kbd, children: ['S'] }
            ]
        },
        {
            tag: 'div',
            attributes: { style: 'display: flex; gap: 0.5rem; align-items: center' },
            children: [
                { tag: 'span', children: ['Undo: '] },
                { tag: Kbd, children: ['⌘'] },
                { tag: Kbd, children: ['Z'] }
            ]
        },
        {
            tag: 'div',
            attributes: { style: 'display: flex; gap: 0.5rem; align-items: center' },
            children: [
                { tag: 'span', children: ['Copy: '] },
                { tag: Kbd, children: ['⌘'] },
                { tag: Kbd, children: ['C'] }
            ]
        }
    ]
};

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

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

const shortcuts = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem',
        children: [
            {
                div: {
                    style: 'display: flex; gap: 0.5rem; align-items: center',
                    children: [{ span: { children: ['Save: '] } }, { Kbd: { children: ['⌘'] } }, { Kbd: { children: ['S'] } }]
                }
            },
            {
                div: {
                    style: 'display: flex; gap: 0.5rem; align-items: center',
                    children: [{ span: { children: ['Undo: '] } }, { Kbd: { children: ['⌘'] } }, { Kbd: { children: ['Z'] } }]
                }
            },
            {
                div: {
                    style: 'display: flex; gap: 0.5rem; align-items: center',
                    children: [{ span: { children: ['Copy: '] } }, { Kbd: { children: ['⌘'] } }, { Kbd: { children: ['C'] } }]
                }
            }
        ]
    }
};

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

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

<div style="display: flex; flex-direction: column; gap: 1rem">
    <div style="display: flex; gap: 0.5rem; align-items: center">
        <span>Save: </span>
        <lv-kbd>⌘</lv-kbd>
        <lv-kbd>S</lv-kbd>
    </div>
    <div style="display: flex; gap: 0.5rem; align-items: center">
        <span>Undo: </span>
        <lv-kbd>⌘</lv-kbd>
        <lv-kbd>Z</lv-kbd>
    </div>
    <div style="display: flex; gap: 0.5rem; align-items: center">
        <span>Copy: </span>
        <lv-kbd>⌘</lv-kbd>
        <lv-kbd>C</lv-kbd>
    </div>
</div>