117 lines
3.9 KiB
TypeScript
117 lines
3.9 KiB
TypeScript
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Clock, Users, LucideIcon } from "lucide-react"
|
|
|
|
interface FormationCardProps {
|
|
icon: LucideIcon
|
|
title: string
|
|
description: string
|
|
program: string[]
|
|
specialization: {
|
|
title: string
|
|
items: string[]
|
|
}
|
|
duration: string
|
|
maxParticipants: string
|
|
color: 'red' | 'green' | 'blue'
|
|
href?: string
|
|
}
|
|
|
|
export default function FormationCard({
|
|
icon: Icon,
|
|
title,
|
|
description,
|
|
program,
|
|
specialization,
|
|
duration,
|
|
maxParticipants,
|
|
color,
|
|
href = "/formation/devis"
|
|
}: FormationCardProps) {
|
|
const getColorClasses = () => {
|
|
switch (color) {
|
|
case 'red':
|
|
return {
|
|
card: "border-2 border-gray-700 hover:border-red-600 bg-gray-800 hover:shadow-xl transition-all duration-300",
|
|
icon: "h-16 w-16 text-red-400 mx-auto mb-4",
|
|
title: "text-2xl text-red-300",
|
|
specialization: "bg-red-900",
|
|
specializationTitle: "font-semibold text-red-200 mb-2",
|
|
specializationItems: "text-sm text-red-300 space-y-1",
|
|
button: "w-full bg-red-600 hover:bg-red-700 text-white"
|
|
}
|
|
case 'green':
|
|
return {
|
|
card: "border-2 border-gray-700 hover:border-green-600 bg-gray-800 hover:shadow-xl transition-all duration-300",
|
|
icon: "h-16 w-16 text-green-400 mx-auto mb-4",
|
|
title: "text-2xl text-green-300",
|
|
specialization: "bg-green-900",
|
|
specializationTitle: "font-semibold text-green-200 mb-2",
|
|
specializationItems: "text-sm text-green-300 space-y-1",
|
|
button: "w-full bg-green-600 hover:bg-green-700 text-white"
|
|
}
|
|
case 'blue':
|
|
return {
|
|
card: "border-2 border-gray-700 hover:border-blue-600 bg-gray-800 hover:shadow-xl transition-all duration-300",
|
|
icon: "h-16 w-16 text-blue-400 mx-auto mb-4",
|
|
title: "text-2xl text-blue-300",
|
|
specialization: "bg-blue-900",
|
|
specializationTitle: "font-semibold text-blue-200 mb-2",
|
|
specializationItems: "text-sm text-blue-300 space-y-1",
|
|
button: "w-full bg-blue-600 hover:bg-blue-700 text-white"
|
|
}
|
|
}
|
|
}
|
|
|
|
const colorClasses = getColorClasses()
|
|
|
|
return (
|
|
<Card className={colorClasses.card}>
|
|
<CardHeader className="text-center">
|
|
<Icon className={colorClasses.icon} />
|
|
<CardTitle className={colorClasses.title}>{title}</CardTitle>
|
|
<CardDescription className="text-lg text-gray-300">
|
|
{description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6 text-gray-300">
|
|
<div>
|
|
<h4 className="font-semibold mb-3">Programme de formation :</h4>
|
|
<ul className="space-y-2">
|
|
{program.map((item, index) => (
|
|
<li key={index}>• {item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className={`${colorClasses.specialization} p-4 rounded-lg`}>
|
|
<h5 className={colorClasses.specializationTitle}>{specialization.title}</h5>
|
|
<ul className={colorClasses.specializationItems}>
|
|
{specialization.items.map((item, index) => (
|
|
<li key={index}>• {item}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-sm text-gray-400">
|
|
<div className="flex items-center">
|
|
<Clock className="h-4 w-4 mr-1" />
|
|
{duration}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Users className="h-4 w-4 mr-1" />
|
|
{maxParticipants}
|
|
</div>
|
|
</div>
|
|
|
|
<Link href={href}>
|
|
<Button className={colorClasses.button}>
|
|
S'inscrire à la formation
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|