62 lines
1.7 KiB
TypeScript
62 lines
1.7 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-2 pb-0 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>
|
|
);
|
|
}
|