skyroc-ui
Version:
A modern React UI component library built on Radix UI and Tailwind CSS
80 lines (78 loc) • 2.31 kB
JavaScript
import { cn } from "../../lib/utils.js";
import If_default from "../if/If.js";
import { cardVariants } from "./card-variants.js";
import { CardContent } from "./CardContent.js";
import { CardFooter } from "./CardFooter.js";
import { CardHeader } from "./CardHeader.js";
import { CardRoot } from "./CardRoot.js";
import { CardTitle } from "./CardTitle.js";
import { CardTitleRoot } from "./CardTitleRoot.js";
import React, { isValidElement } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/card/Card.tsx
const Card = React.forwardRef((props, ref) => {
const { children, className, classNames, extra, flexHeight, footer, header, size, split, title, titleLeading, titleRoot, titleTrailing,...rest } = props;
const showHeader = Boolean(header || title || extra);
const { root } = cardVariants({
size,
split
});
const mergedCls = cn(root(), className);
return /* @__PURE__ */ jsxs(CardRoot, {
className: mergedCls,
...rest,
ref,
children: [
/* @__PURE__ */ jsx(If_default, {
condition: showHeader,
children: /* @__PURE__ */ jsx(CardHeader, {
className: classNames?.header,
size,
children: /* @__PURE__ */ jsxs(If_default, {
condition: !header,
fallback: header,
children: [/* @__PURE__ */ jsx(If_default, {
condition: !titleRoot,
fallback: titleRoot,
children: /* @__PURE__ */ jsxs(CardTitleRoot, {
className: classNames?.titleRoot,
size,
children: [
titleLeading,
/* @__PURE__ */ jsx(If_default, {
condition: !isValidElement(title),
fallback: title,
children: /* @__PURE__ */ jsx(CardTitle, {
className: classNames?.title,
size,
children: title
})
}),
titleTrailing
]
})
}), extra]
})
})
}),
/* @__PURE__ */ jsx(CardContent, {
className: classNames?.content,
flexHeight,
size,
children
}),
/* @__PURE__ */ jsx(If_default, {
condition: !isValidElement(footer) && Boolean(footer),
fallback: footer,
children: /* @__PURE__ */ jsx(CardFooter, {
className: classNames?.footer,
size,
children: footer
})
})
]
});
});
Card.displayName = "Card";
//#endregion
export { Card };