42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { LucideIcon } from "lucide-react"
|
|
|
|
interface ProductCardProps {
|
|
icon: LucideIcon
|
|
title: string
|
|
description: string[]
|
|
variant?: 'default' | 'gradient'
|
|
}
|
|
|
|
export default function ProductCard({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
variant = 'default'
|
|
}: ProductCardProps) {
|
|
const getCardStyles = () => {
|
|
switch (variant) {
|
|
case 'gradient':
|
|
return "border-2 border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-400 transition-colors duration-300 bg-gradient-to-br from-white to-blue-50 dark:from-gray-800 dark:to-blue-900"
|
|
default:
|
|
return "border-2 border-gray-200 dark:border-gray-700 hover:border-blue-200 dark:hover:border-blue-400 transition-colors duration-300"
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className={getCardStyles()}>
|
|
<CardHeader>
|
|
<Icon className="h-12 w-12 text-blue-600 dark:text-blue-400 mb-4" />
|
|
<CardTitle className="dark:text-gray-100">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{description.map((text, index) => (
|
|
<p key={index} className="text-gray-600 dark:text-gray-300 mb-4 last:mb-0">
|
|
{text}
|
|
</p>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|