60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
/**
|
||
* Hoover — components/data.js
|
||
*
|
||
* Data display components: Badge, StatusDot, Empty, Card.
|
||
*/
|
||
|
||
import { h } from '../vdom.js';
|
||
|
||
/**
|
||
* Colored badge/span.
|
||
*
|
||
* @param {object} props
|
||
* @param {string} props.text – Badge text
|
||
* @param {string} [props.variant] – 'info' | 'success' | 'warning' | 'danger'
|
||
*/
|
||
export function Badge(props = {}) {
|
||
return h('span', { class: `badge badge-${props.variant || 'info'}` }, String(props.text || ''));
|
||
}
|
||
|
||
/**
|
||
* Status indicator dot.
|
||
*
|
||
* @param {object} props
|
||
* @param {string} props.status – 'success' | 'up' | 'danger' | 'down' | 'pending'
|
||
*/
|
||
export function StatusDot(props = {}) {
|
||
const v = ['success', 'up'].includes(props.status) ? 'up' :
|
||
['danger', 'down'].includes(props.status) ? 'down' : 'pending';
|
||
return h('span', { class: `status-dot status-${v}` });
|
||
}
|
||
|
||
/**
|
||
* Empty-state placeholder card.
|
||
*
|
||
* @param {object} props
|
||
* @param {string} [props.text]
|
||
*/
|
||
export function Empty(props = {}) {
|
||
return h('div', { class: 'card' },
|
||
h('div', { class: 'text-muted text-sm' }, props.text || 'No data available'),
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Card wrapper with optional header and body content.
|
||
*
|
||
* @param {object} props
|
||
* @param {string} [props.header]
|
||
* @param {VNode[]} [props.children]
|
||
*/
|
||
export function Card(props = {}) {
|
||
if (props.header) {
|
||
return h('div', { class: 'card' },
|
||
h('div', { class: 'card-header' }, props.header),
|
||
h('div', { class: 'card-body' }, props.children || []),
|
||
);
|
||
}
|
||
return h('div', { class: 'card' }, props.children || []);
|
||
}
|