inogen/app/components/ui/base-card.tsx

42 lines
1.2 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;
withHeader?: boolean;
}
export function BaseCard({
title,
className,
headerClassName,
contentClassName,
children,
withHeader = false,
}: BaseCardProps) {
return (
<Card
className={cn(
"bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm py-4 grid items-center",
className
)}
>
{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>
);
}