Spaces:
Configuration error
Configuration error
File size: 2,051 Bytes
e7427b5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { useLocation } from "wouter";
interface ModuleCardProps {
title: string;
description: string;
icon: React.ReactNode;
route: string;
borderColor: string;
iconGradient: string;
features: { icon: React.ReactNode; text: string }[];
status?: string;
}
export default function ModuleCard({
title,
description,
icon,
route,
borderColor,
iconGradient,
features,
status = "Active"
}: ModuleCardProps) {
const [, setLocation] = useLocation();
return (
<Card className={`hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border-l-4 ${borderColor}`}>
<CardContent className="p-6">
<div className="flex items-center justify-between mb-4">
<div className={`w-12 h-12 ${iconGradient} rounded-lg flex items-center justify-center`}>
{icon}
</div>
<Badge variant="secondary" className="bg-emerald-100 text-emerald-800">
{status}
</Badge>
</div>
<h3 className="text-xl font-poppins font-semibold text-deep-charcoal mb-2">{title}</h3>
<p className="text-warm-gray mb-4">{description}</p>
<div className="flex justify-between items-center">
<div className="flex items-center space-x-4 text-sm text-warm-gray">
{features.map((feature, index) => (
<span key={index} className="flex items-center">
{feature.icon}
<span className="ml-1">{feature.text}</span>
</span>
))}
</div>
<Button
variant="ghost"
size="sm"
onClick={() => setLocation(route)}
className="text-saffron hover:text-warm-orange"
>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
</CardContent>
</Card>
);
}
|