@easy-shadcn/react
Version:
Use shadcn/ui easy&enhance like component library
78 lines (75 loc) • 2.48 kB
JavaScript
import { cn } from '@easy-shadcn/utils';
import * as React from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';
var Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"rounded-xl border bg-card text-card-foreground shadow",
className
),
...props
}
));
Card.displayName = "Card";
var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("flex flex-col space-y-1.5 p-6", className),
...props
}
));
CardHeader.displayName = "CardHeader";
var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("font-semibold leading-none tracking-tight", className),
...props
}
));
CardTitle.displayName = "CardTitle";
var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("text-sm text-muted-foreground", className),
...props
}
));
CardDescription.displayName = "CardDescription";
var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
CardContent.displayName = "CardContent";
var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("flex items-center p-6 pt-0", className),
...props
}
));
CardFooter.displayName = "CardFooter";
var Card2 = ({
headerProps,
title,
titleProps,
description,
descriptionProps,
content,
contentProps,
footer,
footerProps,
...resetProps
}) => {
return /* @__PURE__ */ jsxs(Card, { ...resetProps, className: cn("py-6 space-y-6", resetProps?.className), children: [
(title || description) && /* @__PURE__ */ jsxs(CardHeader, { ...headerProps, className: cn("px-6 py-0", headerProps?.className), children: [
title && /* @__PURE__ */ jsx(CardTitle, { ...titleProps, children: title }),
description && /* @__PURE__ */ jsx(CardDescription, { ...descriptionProps, children: description })
] }),
content && /* @__PURE__ */ jsx(CardContent, { ...contentProps, className: cn("px-6 py-0", contentProps?.className), children: content }),
footer && /* @__PURE__ */ jsx(CardFooter, { ...footerProps, className: cn("px-6 py-0", footerProps?.className), children: footer })
] });
};
export { Card2 as Card };