wip

src/components/planes/BarraBusqueda.tsx

@@ -0,0 +1,29 @@
+import { SearchIcon } from 'lucide-react'
+import { useId } from 'react'
+
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const InputSearchIconDemo = () => {
+  const id = useId()
+
+  return (
+    <div className="w-full max-w-xs space-y-2">
+      <Label htmlFor={id}>Search input with icon and button</Label>
+      <div className="relative">
+        <div className="text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50">
+          <SearchIcon className="size-4" />
+          <span className="sr-only">Search</span>
+        </div>
+        <Input
+          id={id}
+          type="search"
+          placeholder="Search..."
+          className="peer px-9 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default InputSearchIconDemo

src/components/planes/PlanEstudiosCard.tsx

@@ -0,0 +1,89 @@
+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>
+  )
+}