49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { cn } from "~/lib/utils";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "./card";
|
|
|
|
interface BaseCardProps {
|
|
title?: string;
|
|
className?: string;
|
|
headerClassName?: string;
|
|
contentClassName?: string;
|
|
children: React.ReactNode;
|
|
icon ?: React.ComponentType<{ className?: string }>;
|
|
withHeader?: boolean;
|
|
}
|
|
|
|
export function BaseCard({
|
|
title,
|
|
className,
|
|
headerClassName,
|
|
contentClassName,
|
|
children,
|
|
withHeader = false,
|
|
icon : Icon,
|
|
}: BaseCardProps) {
|
|
return (
|
|
<Card
|
|
className={cn(
|
|
"bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm py-4 grid items-center",
|
|
className
|
|
)}
|
|
>
|
|
{Icon && title ? (
|
|
<CardHeader className={cn("border-b-2 border-gray-500/20 py-2 px-0 pb-4", headerClassName)}>
|
|
<CardTitle className="text-white text-sm text-right font-persian px-4 my-auto items-center flex w-full justify-between">{title} {<Icon />} </CardTitle>
|
|
</CardHeader>
|
|
) :
|
|
withHeader && title ? (
|
|
<CardHeader className={cn("pb-2 border-b-2 border-gray-500/20", headerClassName)}>
|
|
<CardTitle className="text-white text-sm text-right font-persian px-4">{title}</CardTitle>
|
|
</CardHeader>
|
|
) : title ? (
|
|
<div className="border-b-2 border-gray-500/20 pb-2">
|
|
<h3 className="text-sm font-bold text-white text-right font-persian px-4">{title}</h3>
|
|
</div>
|
|
) : null}
|
|
<CardContent className={cn("py-2 px-4", contentClassName)}>
|
|
{children}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |