UNPKG

@easy-shadcn/react

Version:

Use shadcn/ui easy&enhance like component library

78 lines (75 loc) 2.48 kB
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 };