26 lines
1.2 KiB
TypeScript
26 lines
1.2 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { cn } from "../lib/cn";
|
||
|
|
|
||
|
|
export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||
|
|
({ className, ...props }, ref) => (
|
||
|
|
<div ref={ref} className={cn("rounded-lg border border-border bg-surface shadow-sm", className)} {...props} />
|
||
|
|
)
|
||
|
|
);
|
||
|
|
Card.displayName = "Card";
|
||
|
|
|
||
|
|
export const CardHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||
|
|
<div className={cn("flex flex-col gap-1 p-5", className)} {...props} />
|
||
|
|
);
|
||
|
|
export const CardTitle = ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
|
||
|
|
<h3 className={cn("font-display text-lg font-semibold leading-tight", className)} {...props} />
|
||
|
|
);
|
||
|
|
export const CardDescription = ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
|
||
|
|
<p className={cn("text-sm text-muted", className)} {...props} />
|
||
|
|
);
|
||
|
|
export const CardContent = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||
|
|
<div className={cn("p-5 pt-0", className)} {...props} />
|
||
|
|
);
|
||
|
|
export const CardFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
|
||
|
|
<div className={cn("flex items-center gap-2 p-5 pt-0", className)} {...props} />
|
||
|
|
);
|