@loke/design-system
Version:
A design system with individually importable components
2 lines (1 loc) • 1.33 kB
JavaScript
import{cn}from"@loke/design-system/cn";import{forwardRef}from"react";import{jsx}from"react/jsx-runtime";var Card=forwardRef(({className,...props},ref)=>jsx("div",{className:cn("rounded-lg border bg-card text-card-foreground shadow-xs",className),ref,...props}));Card.displayName="Card";var CardHeader=forwardRef(({className,centered,...props},ref)=>jsx("div",{className:cn("flex flex-col space-y-1.5 p-6",centered&&"items-center",className),ref,...props}));CardHeader.displayName="CardHeader";var CardTitle=forwardRef(({className,...props},ref)=>jsx("h3",{className:cn("flex gap-2 font-semibold text-2xl leading-none tracking-tight",className),ref,...props}));CardTitle.displayName="CardTitle";var CardDescription=forwardRef(({className,...props},ref)=>jsx("p",{className:cn("text-muted-foreground text-sm",className),ref,...props}));CardDescription.displayName="CardDescription";var CardContent=forwardRef(({className,...props},ref)=>jsx("div",{className:cn("p-6 pt-0 first:pt-6",className),ref,...props}));CardContent.displayName="CardContent";var CardFooter=forwardRef(({className,centered,...props},ref)=>jsx("div",{className:cn("flex items-center p-6 pt-0",centered&&"justify-center",className),ref,...props}));CardFooter.displayName="CardFooter";export{CardTitle,CardHeader,CardFooter,CardDescription,CardContent,Card};