56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { ReactNode } from "react";
|
|
|
|
interface CardProps {
|
|
children: ReactNode;
|
|
title?: string;
|
|
description?: string;
|
|
className?: string;
|
|
headerAction?: ReactNode;
|
|
noPadding?: boolean;
|
|
onClick?: () => void;
|
|
allowOverflow?: boolean;
|
|
}
|
|
|
|
export default function Card({
|
|
children,
|
|
title,
|
|
description,
|
|
className = "",
|
|
headerAction,
|
|
noPadding = false,
|
|
onClick,
|
|
allowOverflow = false
|
|
}: CardProps) {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={`bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 transition-all ${allowOverflow ? '' : 'overflow-hidden'} ${className}`}
|
|
>
|
|
{(title || description || headerAction) && (
|
|
<div className="px-6 py-4 border-b border-zinc-100 dark:border-zinc-800 flex items-center justify-between">
|
|
<div>
|
|
{title && (
|
|
<h3 className="text-base font-bold text-zinc-900 dark:text-white">
|
|
{title}
|
|
</h3>
|
|
)}
|
|
{description && (
|
|
<p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{headerAction && (
|
|
<div>{headerAction}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className={noPadding ? "" : "p-6"}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|