104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import React from 'react'
|
|
import clsx from 'clsx'
|
|
|
|
/* ── Card Root ──────────────────────────────────────────────────────────────── */
|
|
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
hover?: boolean
|
|
padding?: 'none' | 'sm' | 'md' | 'lg'
|
|
as?: React.ElementType
|
|
}
|
|
|
|
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
({ hover = false, padding = 'none', as: Tag = 'div', className, children, ...props }, ref) => {
|
|
const paddingClasses = {
|
|
none: '',
|
|
sm: 'p-4',
|
|
md: 'p-5',
|
|
lg: 'p-6',
|
|
}
|
|
|
|
return (
|
|
<Tag
|
|
ref={ref}
|
|
className={clsx(
|
|
'bg-white rounded-xl border border-surface-200 shadow-soft',
|
|
hover && 'transition-all duration-200 cursor-pointer hover:shadow-soft-md hover:-translate-y-0.5',
|
|
paddingClasses[padding],
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
)
|
|
},
|
|
)
|
|
Card.displayName = 'Card'
|
|
|
|
/* ── Card Header ────────────────────────────────────────────────────────────── */
|
|
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
border?: boolean
|
|
}
|
|
export function CardHeader({ border = true, className, children, ...props }: CardHeaderProps) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'px-5 py-4',
|
|
border && 'border-b border-surface-100',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ── Card Body ──────────────────────────────────────────────────────────────── */
|
|
export function CardBody({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div className={clsx('px-5 py-4', className)} {...props}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ── Card Footer ────────────────────────────────────────────────────────────── */
|
|
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
border?: boolean
|
|
}
|
|
export function CardFooter({ border = true, className, children, ...props }: CardFooterProps) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'px-5 py-3',
|
|
border && 'border-t border-surface-100',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ── Card Title ─────────────────────────────────────────────────────────────── */
|
|
export function CardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
|
|
return (
|
|
<h3 className={clsx('text-base font-semibold text-ink', className)} {...props}>
|
|
{children}
|
|
</h3>
|
|
)
|
|
}
|
|
|
|
/* ── Card Description ───────────────────────────────────────────────────────── */
|
|
export function CardDescription({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
|
|
return (
|
|
<p className={clsx('text-sm text-ink-muted mt-0.5', className)} {...props}>
|
|
{children}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
export default Card
|