44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import type { LucideIcon } from "lucide-react";
|
|
|
|
interface DemoCardProps {
|
|
title: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
iconColorClass?: string;
|
|
glowClass?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function DemoCard({
|
|
title,
|
|
description,
|
|
icon: Icon,
|
|
iconColorClass = "bg-primary/10 text-primary",
|
|
glowClass = "glow-primary",
|
|
children,
|
|
}: DemoCardProps) {
|
|
return (
|
|
<Card className="card-hover glass-card overflow-hidden">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2 rounded-lg ${iconColorClass} ${glowClass}`}>
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-xl">{title}</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">{children}</CardContent>
|
|
</Card>
|
|
);
|
|
}
|