shelving/ui/misc/Tag.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { Clickable } from "../form/Clickable.js";
import { getColorClass } from "../style/Color.js";
import { getStatusClass } from "../style/Status.js";
import { getClass, getModuleClass } from "../util/css.js";
import TAG_CSS from "./Tag.module.css";
/**
 * Small inline label used to annotate other content.
 * - Delegates to `getClickable()` — renders as `<a>` when `href` is set, otherwise `<button>`.
 * - Accepts a status variant (`success`, `info`, `error`, etc.) _or_ a raw colour variant (`red`, `blue`, `purple`, etc.).
 *
 * @example <Tag success>Active</Tag>
 * @example <Tag purple href="/beta">Beta</Tag>
 */
export function Tag(props) {
    return _jsx(Clickable, { ...props, className: getTagClass(props) });
}
export function getTagClass(variants) {
    return getClass(TAG_CSS.tag, //
    getModuleClass(TAG_CSS, variants), getStatusClass(variants), getColorClass(variants));
}