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

@@ -1,6 +1,6 @@
-import { ArrowRight  } from 'lucide-react'
+import { ArrowRight } from 'lucide-react'
 
-import type {LucideIcon} from 'lucide-react';
+import type { LucideIcon } from 'lucide-react'
 
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
@@ -36,7 +36,7 @@ export default function PlanEstudiosCard({
     <Card
       onClick={onClick}
       className={cn(
-        'group relative flex h-full cursor-pointer flex-col justify-between overflow-hidden border-l-4 transition-all hover:shadow-lg',
+        '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={{
@@ -61,14 +61,14 @@ export default function PlanEstudiosCard({
         </h4>
       </CardHeader>
 
-      <CardContent className="text-muted-foreground space-y-1 pb-4 text-sm">
+      <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 py-3 backdrop-blur-sm">
+      <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>