wmq
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react'
|
|
import { cn } from '@/utils/cn'
|
|
|
|
export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div
|
|
className={cn('rounded-lg border border-border bg-card shadow-[0_1px_2px_rgba(16,24,40,0.04)]', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function CardHeader({
|
|
className,
|
|
title,
|
|
description,
|
|
action,
|
|
children,
|
|
...props
|
|
}: HTMLAttributes<HTMLDivElement> & { title?: ReactNode; description?: ReactNode; action?: ReactNode }) {
|
|
return (
|
|
<div className={cn('flex items-start justify-between gap-3 border-b border-border px-4 py-3', className)} {...props}>
|
|
<div className="min-w-0">
|
|
{title && <h3 className="text-sm font-semibold text-foreground">{title}</h3>}
|
|
{description && <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>}
|
|
{children}
|
|
</div>
|
|
{action && <div className="shrink-0">{action}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
|
return <div className={cn('p-4', className)} {...props} />
|
|
}
|
|
|
|
export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
|
|
return <div className={cn('border-t border-border px-4 py-3', className)} {...props} />
|
|
}
|