lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
746 lines (682 loc) • 34.7 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="/docs/components/index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden"
src="/docs/components/component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header -->
<div class="gallery-header">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Components Gallery</h1>
</div>
<!-- Content -->
<div class="gallery-content">
<!-- Intro -->
<div class="gallery-intro">
<p>Explore all Lightview components powered by DaisyUI. Use the sidebar (<code>>></code>) to
navigate to individual
component documentation, or browse just a few examples below and click on the ⓘ icons
to see more documentation.</p>
</div>
<!-- Section placeholders - each script renders into its section -->
<section class="gallery-section" id="usage-section">
<div class="card bg-base-100 shadow-sm" style="border: 1px solid var(--base-300);">
<div class="card-body">
<h2 class="card-title">Using Components</h2>
<p style="margin-bottom: 1rem;">Components can be used with multiple syntaxes. Choose your
style (Object DOM and HTML requires <code>lightview-x</code>):</p>
<script>
globalThis.switchUsageSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object', 'html'];
tabs.forEach(t => {
const tabEl = document.getElementById(`usage-tab-${t}`);
const contentEl = document.getElementById(`usage-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<!-- Tabs -->
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="usage-tab-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchUsageSyntaxTab('tagged')">Tagged</button>
<button id="usage-tab-vdom" role="tab" class="syntax-tab"
onclick="switchUsageSyntaxTab('vdom')">vDOM</button>
<button id="usage-tab-object" role="tab" class="syntax-tab"
onclick="switchUsageSyntaxTab('object')">Object DOM</button>
<button id="usage-tab-html" role="tab" class="syntax-tab"
onclick="switchUsageSyntaxTab('html')">HTML</button>
</div>
<!-- Content Containers -->
<div id="usage-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css'],
type: 'module',
minHeight: 105,
autoRun: true
});
</script><code contenteditable="true">await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { div, Button } = tags;
const app = div({ style: 'padding: 1rem; display: flex; gap: 0.5rem;' },
Button({ color: 'primary' }, 'Save'),
Button({ variant: 'outline' }, 'Cancel')
);
$('#example').content(app);</code></pre>
</div>
<div id="usage-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css'],
type: 'module',
minHeight: 105
});
</script><code contenteditable="true">await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { div, Button } = tags;
const app = {
tag: div,
attributes: { style: 'padding: 1rem; display: flex; gap: 0.5rem;' },
children: [
{ tag: Button, attributes: { color: 'primary' }, children: ['Save'] },
{ tag: Button, attributes: { variant: 'outline' }, children: ['Cancel'] }
]
};
$('#example').content(app);</code></pre>
</div>
<div id="usage-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css'],
type: 'module',
minHeight: 105
});
</script><code contenteditable="true">// Object DOM syntax now requires lightview-x.js
await import('/components/actions/button.js');
const { $ } = Lightview;
const app = {
div: {
style: 'padding: 1rem; display: flex; gap: 0.5rem;',
children: [
{ Button: { color: 'primary', children: ['Save'] } },
{ Button: { variant: 'outline', children: ['Cancel'] } }
]
}
};
$('#example').content(app);</code></pre>
</div>
<div id="usage-syntax-html" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css'],
type: 'module',
language: 'html',
minHeight: 105
});
</script><code contenteditable="true" class="language-html"><!-- Import the component (registers lv-button) -->
<script type="module" src="/components/actions/button.js"></script>
<div style="padding: 1rem; display: flex; gap: 0.5rem;">
<lv-button color="primary">Save</lv-button>
<lv-button variant="outline">Cancel</lv-button>
</div></code></pre>
</div>
</div>
</div>
</section>
<section class="gallery-section" id="buttons-section"></section>
<section class="gallery-section" id="inputs-section"></section>
<section class="gallery-section" id="cards-section"></section>
<section class="gallery-section" id="alerts-section"></section>
<section class="gallery-section" id="badges-section"></section>
<section class="gallery-section" id="stats-section"></section>
<section class="gallery-section" id="charts-section"></section>
<section class="gallery-section" id="progress-section"></section>
<section class="gallery-section" id="steps-section"></section>
<section class="gallery-section" id="chat-section"></section>
<section class="gallery-section" id="timeline-section"></section>
<section class="gallery-section" id="table-section"></section>
</div>
</div>
</div>
</div>
<!-- Shared helpers and sidebar setup -->
<script type="module">
const { tags, signal, $ } = Lightview;
const { div, section, h2, h3, p, button, span, ul, svg, path, pre, code } = tags;
// Sidebar state
const sidebarOpen = signal(false);
// Toggle sidebar
const sidebar = document.getElementById('gallery-sidebar');
const main = document.getElementById('gallery-main');
const overlay = document.getElementById('sidebar-overlay');
const toggleBtn = document.getElementById('toggle-btn');
const toggleIcon = toggleBtn.querySelector('svg');
function updateSidebarUI() {
sidebar.className = `gallery-sidebar ${sidebarOpen.value ? 'open' : 'closed'}`;
main.className = `gallery-main ${sidebarOpen.value ? 'sidebar-open' : ''}`;
overlay.className = `sidebar-overlay ${sidebarOpen.value ? 'active' : ''}`;
toggleIcon.setAttribute('class', `toggle-icon ${sidebarOpen.value ? '' : 'rotated'}`);
}
toggleBtn.onclick = () => {
sidebar.style.visibility = ''; // Remove initial hidden state
sidebarOpen.value = !sidebarOpen.value;
updateSidebarUI();
};
overlay.onclick = () => { sidebarOpen.value = false; updateSidebarUI(); };
updateSidebarUI();
// Mark layout as ready - enables sidebar visibility after initial state is set
document.querySelector('.gallery-layout').classList.add('js-ready');
// Info icon helper (shared via window)
globalThis.InfoIcon = () => tags.span({ class: "info-icon-char", style: "font-size: 1.2rem; font-weight: bold; font-style: normal;" }, "ⓘ");
</script>
<!-- Buttons Section -->
<script type="module">
await import('/components/actions/button.js');
await import('/components/data-display/card.js');
const { tags, $ } = Lightview;
const { div, span, a, Button, Card } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge" }, "Buttons"),
a({ href: "/docs/components/button", class: "info-link", "aria-label": "View Button Docs" }, InfoIcon())
),
Card({ styleSheets: ['/docs/components/index.css'] },
Card.Body({},
div({ style: "margin-bottom: 1.5rem;" },
div({ class: "component-label" }, "Colors"),
div({ class: "component-row" },
Button({ useShadow: true }, "Default"),
Button({ color: "neutral" }, "Neutral"),
Button({ color: "primary" }, "Primary"),
Button({ color: "secondary" }, "Secondary"),
Button({ color: "accent" }, "Accent"),
Button({ color: "info" }, "Info"),
Button({ color: "success" }, "Success"),
Button({ color: "warning" }, "Warning"),
Button({ color: "error" }, "Error")
)
),
div({ style: "margin-bottom: 1.5rem;" },
div({ class: "component-label" }, "Variants"),
div({ class: "component-row" },
Button({ variant: "outline", color: "primary" }, "Outline"),
Button({ variant: "soft", color: "primary" }, "Soft"),
Button({ color: "ghost" }, "Ghost"),
Button({ color: "link" }, "Link")
)
),
div({},
div({ class: "component-label" }, "Sizes"),
div({ class: "component-row centered" },
Button({ size: "xs" }, "Tiny"),
Button({ size: "sm" }, "Small"),
Button({ size: "md" }, "Medium"),
Button({ size: "lg" }, "Large")
)
)
)
)
);
$('#buttons-section').content(content);
</script>
<!-- Inputs Section -->
<script type="module">
await import('/components/data-input/input.js');
await import('/components/data-input/select.js');
await import('/components/data-input/file-input.js');
await import('/components/data-input/range.js');
await import('/components/data-input/textarea.js');
await import('/components/data-input/rating.js');
await import('/components/data-input/checkbox.js');
await import('/components/data-input/toggle.js');
await import('/components/data-input/radio.js');
await import('/components/data-display/card.js');
const { tags, $ } = Lightview;
const { div, span, a, option, Input, Select, FileInput, Range, Textarea, Rating, Checkbox, Toggle, Radio, Card } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge accent" }, "Inputs"),
a({ href: "/docs/components/input", class: "info-link", "aria-label": "View Input Docs" }, InfoIcon())
),
Card({ styleSheets: ['/docs/components/index.css'] },
Card.Body({},
// Row 1: Text Input, Select, File Input, Textarea (2 columns)
div({ class: "inputs-2col", style: "margin-bottom: 1.5rem;" },
div({ class: "form-group" },
div({ class: "form-label" },
span({ class: "label-text" }, "Text Input"),
a({ href: "/docs/components/input", class: "info-link" }, InfoIcon())
),
Input({ placeholder: "Type here" })
),
div({ class: "form-group" },
div({ class: "form-label" },
span({ class: "label-text" }, "Select"),
a({ href: "/docs/components/select", class: "info-link" }, InfoIcon())
),
Select({ useShadow: true },
option({ disabled: true, selected: true }, "Pick one"),
option({}, "Option A"),
option({}, "Option B")
)
),
div({ class: "form-group" },
div({ class: "form-label" },
span({ class: "label-text" }, "File Input"),
a({ href: "/docs/components/file-input", class: "info-link" }, InfoIcon())
),
FileInput({ useShadow: true })
),
div({ class: "form-group" },
div({ class: "form-label" },
span({ class: "label-text" }, "Textarea"),
a({ href: "/docs/components/textarea", class: "info-link" }, InfoIcon())
),
Textarea({ placeholder: "Bio" })
)
),
// Row 2: Rating and Range (2 columns)
div({ class: "inputs-2col", style: "margin-bottom: 1.5rem;" },
div({ class: "form-group" },
div({ class: "form-label" },
span({ class: "label-text" }, "Rating"),
a({ href: "/docs/components/rating", class: "info-link" }, InfoIcon())
),
Rating({ value: 3, max: 5 })
),
div({ class: "form-group" },
div({ class: "form-label" },
span({ class: "label-text" }, "Range"),
a({ href: "/docs/components/range", class: "info-link" }, InfoIcon())
),
Range({ min: 0, max: 100, value: 40, color: "primary" })
)
),
// Row 3: Checkbox, Toggle, Radio (3 columns)
div({ class: "inputs-3col" },
div({ class: "toggle-item" },
span({}, "Checkbox"),
a({ href: "/docs/components/checkbox", class: "info-link" }, InfoIcon()),
Checkbox({ color: "primary", checked: true })
),
div({ class: "toggle-item" },
span({}, "Toggle"),
a({ href: "/docs/components/toggle", class: "info-link" }, InfoIcon()),
Toggle({ color: "secondary", checked: true })
),
div({ class: "toggle-item" },
span({}, "Radio"),
a({ href: "/docs/components/radio", class: "info-link" }, InfoIcon()),
Radio({ color: "accent", checked: true, name: "demo-radio" })
)
)
)
)
);
$('#inputs-section').content(content);
</script>
<!-- Cards Section -->
<script type="module">
await import('/components/data-display/card.js');
await import('/components/actions/button.js');
const { tags, $ } = Lightview;
const { div, span, a, p, img, Card, Button } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge secondary" }, "Cards"),
a({ href: "/docs/components/card", class: "info-link" }, InfoIcon())
),
div({ class: "card-grid" },
Card({ imageFull: true, useShadow: true, styleSheets: ['/docs/components/index.css'] },
Card.Figure({},
img({ src: "https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=400&h=200&fit=crop", alt: "Shoes" })
),
Card.Body({},
Card.Title({}, "Image Overlay"),
p({}, "Seamless image integration.")
)
),
Card({ styleSheets: ['/docs/components/index.css'] },
Card.Body({},
Card.Title({}, "Standard"),
p({}, "A simple card with padding and shadow."),
Card.Actions({ justify: "end" },
Button({ color: "primary", size: "sm" }, "Action")
)
)
),
Card({ bg: "bg-primary", useShadow: true, class: "text-primary-content", styleSheets: ['/docs/components/index.css'] },
Card.Body({},
Card.Title({}, "Colored"),
p({}, "Cards can use theme colors directly.")
)
)
)
);
$('#cards-section').content(content);
</script>
<!-- Alerts Section -->
<script type="module">
await import('/components/data-display/alert.js');
const { tags, $ } = Lightview;
const { div, span, a, Alert } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge info" }, "Alerts"),
a({ href: "/docs/components/alert", class: "info-link" }, InfoIcon())
),
div({ class: "alert-stack" },
Alert({ color: "info" }, span({}, "New software update available.")),
Alert({ color: "success" }, span({}, "Your purchase has been confirmed!"))
)
);
$('#alerts-section').content(content);
</script>
<!-- Badges & Avatars Section -->
<script type="module">
await import('/components/data-display/badge.js');
await import('/components/data-display/avatar.js');
await import('/components/data-display/card.js');
const { tags, $ } = Lightview;
const { div, span, a, Badge, Avatar, Card } = tags;
const content = div({ class: "component-grid-2" },
div({},
div({ class: "section-header" },
span({ class: "section-badge success" }, "Badges"),
a({ href: "/docs/components/badge", class: "info-link" }, InfoIcon())
),
Card({ styleSheets: ['/docs/components/index.css'] },
Card.Body({},
div({ class: "badge-group" },
Badge({ useShadow: true }, "default"),
Badge({ color: "primary" }, "primary"),
Badge({ variant: "outline" }, "outline"),
Badge({ variant: "ghost" }, "ghost")
)
)
)
),
div({},
div({ class: "section-header" },
span({ class: "section-badge neutral" }, "Avatars"),
a({ href: "/docs/components/avatar", class: "info-link" }, InfoIcon())
),
Card({ styleSheets: ['/docs/components/index.css'] },
Card.Body({},
div({ class: "avatar-group" },
Avatar({ src: "https://i.pravatar.cc/150?img=1", online: true }),
Avatar({ src: "https://i.pravatar.cc/150?img=2", offline: true }),
Avatar({ placeholder: "UI" })
)
)
)
)
);
$('#badges-section').content(content);
</script>
<!-- Stats Section -->
<script type="module">
await import('/components/data-display/stats.js');
const { tags, $ } = Lightview;
const { div, span, a, Stats } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge" }, "Stats"),
a({ href: "/docs/components/stats", class: "info-link" }, InfoIcon())
),
Stats({ useShadow: true, shadow: true },
Stats.Stat({},
Stats.Title({}, "Total Likes"),
Stats.Value({ class: "text-primary" }, "25.6K"),
Stats.Desc({}, "21% more than last month")
),
Stats.Stat({},
Stats.Title({}, "Page Views"),
Stats.Value({ class: "text-secondary" }, "2.6M"),
Stats.Desc({}, "21% more than last month")
)
)
);
$('#stats-section').content(content);
</script>
<!-- Charts Section -->
<script type="module">
await import('/components/data-display/chart.js');
await import('/components/data-display/card.js');
const { tags, $ } = Lightview;
const { div, span, a, tr, th, td, Chart, Card } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge" }, "Charts"),
a({ href: "/docs/components/chart", class: "info-link", "aria-label": "View Charts Docs" }, InfoIcon())
),
Card({ styleSheets: ['/docs/components/index.css'] },
Card.Body({},
div({ class: "form-label" },
span({ class: "label-text" }, "Bar Chart"),
a({ href: "/docs/components/chart-bar", class: "info-link", "aria-label": "View Bar Chart Details" }, InfoIcon())
),
Chart({
type: "bar",
showLabels: true,
showPrimaryAxis: true,
dataSpacing: 5,
useShadow: true,
style: "height: 200px;"
},
Chart.Head({},
tr({}, th({}, "Year"), th({}, "Growth"))
),
Chart.Body({},
tr({}, th({}, "2021"), td({ style: "--size: 0.4;" }, span({ class: "data" }, "40%"))),
tr({}, th({}, "2022"), td({ style: "--size: 0.6;" }, span({ class: "data" }, "60%"))),
tr({}, th({}, "2023"), td({ style: "--size: 0.75;" }, span({ class: "data" }, "75%"))),
tr({}, th({}, "2024"), td({ style: "--size: 0.9; --color: #7480ff;" }, span({ class: "data" }, "90%")))
)
)
)
)
);
$('#charts-section').content(content);
</script>
<!-- Progress Section -->
<script type="module">
await import('/components/data-display/progress.js');
await import('/components/data-display/radial-progress.js');
await import('/components/data-display/loading.js');
await import('/components/data-display/card.js');
const { tags, $ } = Lightview;
const { div, span, a, Progress, RadialProgress, Loading, Card } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge accent" }, "Progress"),
a({ href: "/docs/components/progress", class: "info-link" }, InfoIcon())
),
Card({ styleSheets: ['/docs/components/index.css'] },
Card.Body({},
div({ class: "component-grid-2" },
div({},
div({ class: "form-label" },
span({ class: "label-text" }, "Bars"),
a({ href: "/docs/components/progress", class: "info-link", "aria-label": "View Progress Docs" }, InfoIcon())
),
div({ class: "progress-stack" },
Progress({ value: 0 }),
Progress({ value: 40, color: "primary" }),
Progress({ value: 70, color: "secondary" }),
Progress({ value: 100, color: "accent" })
)
),
div({},
div({ class: "form-label" },
span({ class: "label-text" }, "Radial & Loading"),
div({ style: "display: flex; gap: 0.25rem;" },
a({ href: "/docs/components/radial-progress", class: "info-link", title: "Radial Progress", "aria-label": "View Radial Progress Docs" }, InfoIcon()),
a({ href: "/docs/components/loading", class: "info-link", title: "Loading", "aria-label": "View Loading Docs" }, InfoIcon())
)
),
div({ class: "loading-row" },
RadialProgress({ value: 70, color: "primary" }, "70%"),
Loading({ type: "spinner", color: "primary" }),
Loading({ type: "dots", color: "secondary" }),
Loading({ type: "ring", color: "accent" })
)
)
)
)
)
);
$('#progress-section').content(content);
</script>
<!-- Steps Section -->
<script type="module">
await import('/components/navigation/steps.js');
const { tags, $ } = Lightview;
const { div, span, a, Steps } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge neutral" }, "Steps"),
a({ href: "/docs/components/steps", class: "info-link" }, InfoIcon())
),
div({ class: "steps-container" },
Steps({ useShadow: true },
Steps.Item({ color: "primary" }, "Register"),
Steps.Item({ color: "primary" }, "Choose plan"),
Steps.Item({}, "Purchase"),
Steps.Item({}, "Receive Product")
)
)
);
$('#steps-section').content(content);
</script>
<!-- Chat Section -->
<script type="module">
await import('/components/data-display/chat.js');
const { tags, $ } = Lightview;
const { div, span, a, time, Chat } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge info" }, "Chat"),
a({ href: "/docs/components/chat", class: "info-link" }, InfoIcon())
),
div({ class: "mockup-window" },
div({ class: "mockup-header" },
span({ class: "mockup-dot" }),
span({ class: "mockup-dot" }),
span({ class: "mockup-dot" })
),
div({ class: "mockup-content" },
div({ class: "chat-container" },
Chat({ position: "start" },
Chat.Image({ src: "https://i.pravatar.cc/150?img=32" }),
Chat.Header({}, "Alex ", time({ class: "text-xs opacity-50" }, "12:45")),
Chat.Bubble({}, "Hey! Did you see the new component library?"),
Chat.Footer({}, "Delivered")
),
Chat({ position: "end" },
Chat.Image({ src: "https://i.pravatar.cc/150?img=12" }),
Chat.Header({}, "Jordan ", time({ class: "text-xs opacity-50" }, "12:46")),
Chat.Bubble({}, "Yes! It looks amazing. Really clean design."),
Chat.Footer({}, "Seen at 12:46")
)
)
)
)
);
$('#chat-section').content(content);
</script>
<!-- Timeline Section -->
<script type="module">
await import('/components/data-display/timeline.js');
const { tags, $ } = Lightview;
const { div, span, a, Timeline } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge success" }, "Timeline"),
a({ href: "/docs/components/timeline", class: "info-link" }, InfoIcon())
),
div({ class: "timeline-container" },
Timeline({ vertical: false },
Timeline.Item({},
Timeline.Start({ class: "timeline-box" }, "Start"),
Timeline.Middle({}),
Timeline.Hr({ color: "primary" })
),
Timeline.Item({},
Timeline.Hr({ color: "primary" }),
Timeline.Middle({}),
Timeline.End({ box: true }, "Apple Inc."),
Timeline.Hr({ color: "primary" })
),
Timeline.Item({},
Timeline.Hr({ color: "primary" }),
Timeline.Start({ class: "timeline-box" }, "Google"),
Timeline.Middle({}),
Timeline.Hr({})
),
Timeline.Item({},
Timeline.Hr({}),
Timeline.Middle({}),
Timeline.End({ box: true }, "SpaceX")
)
)
)
);
$('#timeline-section').content(content);
</script>
<!-- Table Section -->
<script type="module">
await import('/components/data-display/table.js');
const { tags, $ } = Lightview;
const { div, span, a, tr, th, td, Table } = tags;
const content = div({},
div({ class: "section-header" },
span({ class: "section-badge" }, "Table"),
a({ href: "/docs/components/table", class: "info-link" }, InfoIcon())
),
Table({ zebra: true },
Table.Head({},
tr({}, th({}), th({}, "Name"), th({}, "Job"), th({}, "Favorite Color"))
),
Table.Body({},
tr({}, th({}, "1"), td({}, "Cy Ganderton"), td({}, "Quality Control Specialist"), td({}, "Blue")),
tr({ class: "hover" }, th({}, "2"), td({}, "Hart Hagerty"), td({}, "Desktop Support Technician"), td({}, "Purple")),
tr({}, th({}, "3"), td({}, "Brice Swyre"), td({}, "Tax Accountant"), td({}, "Red"))
)
)
);
$('#table-section').content(content);
</script>