32 lines
973 B
TypeScript
32 lines
973 B
TypeScript
import { ReactNode, HTMLAttributes } from 'react'
|
|
import { clsx } from 'clsx'
|
|
|
|
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
children: ReactNode
|
|
className?: string
|
|
title?: string
|
|
description?: string
|
|
footer?: ReactNode
|
|
}
|
|
|
|
export function Card({ children, className, title, description, footer, ...props }: CardProps) {
|
|
return (
|
|
<div className={clsx('bg-dark-card rounded-lg border border-gray-800 overflow-hidden', className)} {...props}>
|
|
{(title || description) && (
|
|
<div className="px-6 py-4 border-b border-gray-800">
|
|
{title && <h3 className="text-lg font-medium text-white">{title}</h3>}
|
|
{description && <p className="mt-1 text-sm text-gray-400">{description}</p>}
|
|
</div>
|
|
)}
|
|
<div className="p-6">
|
|
{children}
|
|
</div>
|
|
{footer && (
|
|
<div className="px-6 py-4 bg-gray-900/50 border-t border-gray-800">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|