@ducor/react
Version:
admin template ui interface
71 lines (70 loc) • 4.02 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { twMerge } from "tailwind-merge";
import colors, { getColor } from "../helpers/colors";
import { createContext, useContext, forwardRef } from "react";
import { Heading, Text } from "./typography";
import Flex from "./flex";
// Context to share color and variant between card components
const CardColorContext = createContext(undefined);
const Card = forwardRef((_a, ref) => {
var { children, className, color, variant = "solid" } = _a, props = __rest(_a, ["children", "className", "color", "variant"]);
return (_jsx(CardColorContext.Provider, { value: { color, variant }, children: _jsx("div", Object.assign({ ref: ref, className: twMerge("sm:rounded-lg border min-h-10", color ? colors.borders[color] : colors.borders.default, getColor({
variant: color ? variant : "link",
color,
active: true,
}), className) }, props, { children: children })) }));
});
const CardHeader = forwardRef((_a, ref) => {
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
const { color } = useContext(CardColorContext) || {};
return (_jsx("div", Object.assign({ ref: ref, className: twMerge("p-4 sm:px-6 flex flex-col border-b", color ? colors.borders[color] : colors.borders.default, className) }, props, { children: _jsx(Flex, { justify: 'between', align: 'center', gap: 3, children: children }) })));
});
const CardBody = forwardRef((_a, ref) => {
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
return (_jsx("div", Object.assign({ ref: ref, className: twMerge("min-h-10 p-4 w-full", className) }, props, { children: children })));
});
const CardFooter = forwardRef((_a, ref) => {
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
const { color } = useContext(CardColorContext) || {};
return (_jsx("div", Object.assign({ ref: ref, className: twMerge("p-4 border-t", className, color ? colors.borders[color] : colors.borders.default) }, props, { children: children })));
});
const CardTitle = forwardRef((_a, ref) => {
var { children, color = "default", className } = _a, props = __rest(_a, ["children", "color", "className"]);
return (_jsx(Heading, Object.assign({ ref: ref, as: 'h3', color: color, className: twMerge(className) }, props, { children: children })));
});
const CardSubTitle = forwardRef((_a, ref) => {
var { children, className, color = "default" } = _a, props = __rest(_a, ["children", "className", "color"]);
return (_jsx(Text, Object.assign({ ref: ref, className: twMerge(className), color: color }, props, { children: children })));
});
const CardText = forwardRef((_a, ref) => {
var { children, className, color = "default" } = _a, props = __rest(_a, ["children", "className", "color"]);
return (_jsx(Text, Object.assign({ ref: ref, className: twMerge(className), color: color }, props, { children: children })));
});
// Add display names for all components
Card.displayName = "Card";
CardHeader.displayName = "CardHeader";
CardBody.displayName = "CardBody";
CardFooter.displayName = "CardFooter";
CardTitle.displayName = "CardTitle";
CardSubTitle.displayName = "CardSubTitle";
CardText.displayName = "CardText";
// Export all as a single Card object with subcomponents
export default Object.assign(Card, {
Header: CardHeader,
Body: CardBody,
Footer: CardFooter,
Title: CardTitle,
SubTitle: CardSubTitle,
Text: CardText,
});