90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import { ArrowRight } from 'lucide-react'
|
|
|
|
import type { LucideIcon } from 'lucide-react'
|
|
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
|
|
import { cn } from '@/lib/utils' // Asegúrate de tener tu utilidad cn
|
|
|
|
interface PlanEstudiosCardProps {
|
|
/** El componente del ícono importado de lucide-react (ej. BookOpen) */
|
|
Icono: LucideIcon
|
|
nombrePrograma: string
|
|
nivel: string
|
|
ciclos: string | number // Acepta "8" o "8 semestres"
|
|
facultad: string
|
|
estado: string
|
|
/** Código hex o variable CSS (ej. "#ef4444" o "var(--primary)") */
|
|
claseColorEstado?: string
|
|
colorFacultad: string
|
|
/** Opcional: para manejar el click en la tarjeta */
|
|
onClick?: () => void
|
|
}
|
|
|
|
export default function PlanEstudiosCard({
|
|
Icono,
|
|
nombrePrograma,
|
|
nivel,
|
|
ciclos,
|
|
facultad,
|
|
estado,
|
|
claseColorEstado = '',
|
|
colorFacultad,
|
|
onClick,
|
|
}: PlanEstudiosCardProps) {
|
|
return (
|
|
<Card
|
|
onClick={onClick}
|
|
className={cn(
|
|
'group relative flex h-full cursor-pointer flex-col justify-between gap-2 overflow-hidden border-l-4 transition-all hover:shadow-lg',
|
|
)}
|
|
// Aplicamos el color de la facultad dinámicamente al borde y un fondo muy sutil
|
|
style={{
|
|
borderLeftColor: colorFacultad,
|
|
backgroundColor: `color-mix(in srgb, ${colorFacultad}, transparent 95%)`, // Truco CSS moderno para fondo tintado
|
|
}}
|
|
>
|
|
<CardHeader className="pb-2">
|
|
{/* Ícono con el color de la facultad */}
|
|
<div
|
|
className="mb-2 w-fit rounded-md p-2"
|
|
style={{
|
|
backgroundColor: `color-mix(in srgb, ${colorFacultad}, transparent 85%)`,
|
|
}}
|
|
>
|
|
<Icono size={24} style={{ color: colorFacultad }} />
|
|
</div>
|
|
|
|
{/* Título del Programa */}
|
|
<h4 className="line-clamp-2 text-lg leading-tight font-bold tracking-tight">
|
|
{nombrePrograma}
|
|
</h4>
|
|
</CardHeader>
|
|
|
|
<CardContent className="text-muted-foreground space-y-1 text-sm">
|
|
<p className="text-foreground font-medium">
|
|
{nivel} • {ciclos}
|
|
</p>
|
|
<p>{facultad}</p>
|
|
</CardContent>
|
|
|
|
<CardFooter className="bg-background/50 flex items-center justify-between border-t px-6 pb-3 backdrop-blur-sm [.border-t]:pt-3">
|
|
<Badge className={`text-sm font-semibold ${claseColorEstado}`}>
|
|
{estado}
|
|
</Badge>
|
|
{/* <span className="text-foreground/80 text-sm font-semibold">
|
|
{estado}
|
|
</span> */}
|
|
|
|
{/* Flecha animada */}
|
|
<div
|
|
className="rounded-full p-1 transition-transform duration-300 group-hover:translate-x-1"
|
|
style={{ color: colorFacultad }}
|
|
>
|
|
<ArrowRight size={20} />
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|