domrichardson
38 lines
918 B
TypeScript
38 lines
918 B
TypeScript
import { clsx } from "clsx";
|
|
import { HTMLAttributes } from "react";
|
|
|
|
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
padding?: boolean;
|
|
}
|
|
|
|
export function Card({ className, padding = true, children, ...props }: CardProps) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"rounded-xl border border-border bg-surface",
|
|
padding && "p-6",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CardHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div className={clsx("mb-4 flex items-center justify-between", className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CardTitle({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>) {
|
|
return (
|
|
<h2 className={clsx("text-lg font-semibold text-text-primary", className)} {...props}>
|
|
{children}
|
|
</h2>
|
|
);
|
|
}
|