@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
38 lines (37 loc) • 1.49 kB
JavaScript
import { useClasses } from "./Card.styles.js";
import { getColor } from "@hitachivantara/uikit-styles";
import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Card/Card.tsx
/**
* A Card is a container for short, related content—similar in shape to a playing card—and serves as an entry point to more detailed information.
*/
var HvCard = forwardRef(function HvCard(props, ref) {
const { classes: classesProp, style, className, children, icon, selectable, selected, statusColor = "sema0", bgcolor, ...others } = useDefaultProps("HvCard", props);
const { classes, cx } = useClasses(classesProp);
const barColor = statusColor !== "sema0" && statusColor || selected && "text" || void 0;
return /* @__PURE__ */ jsxs("div", {
ref,
style: mergeStyles(style, {
"--bg-color": getColor(bgcolor),
"--bar-height": selected && "4px",
"--bar-color": getColor(barColor)
}),
"data-color": statusColor,
className: cx("HvIsCardGridElement", classes.root, {
[classes.selectable]: selectable,
[classes.selected]: selected
}, className),
...others,
children: [/* @__PURE__ */ jsxs("div", {
className: classes.semanticContainer,
children: [/* @__PURE__ */ jsx("div", { className: classes.semanticBar }), /* @__PURE__ */ jsx("div", {
className: classes.icon,
children: icon
})]
}), children]
});
});
//#endregion
export { HvCard };