Guillermo.Arrieta/acad-ia-2
0
0
Fork 0
Code Issues 9 Pull Requests Actions Wiki Activity

wip

Browse Source
This commit is contained in:
Guillermo Arrieta Medina
2026-04-13 11:04:28 -06:00
parent b77906e2e9
commit d3267e5890
1 changed files with 37 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+37 -28
View File
@@ -28,7 +28,7 @@ export const Route = createFileRoute(
component: AsignaturaLayout, component: AsignaturaLayout,
}) })
// --- 1. COMPONENTE PARA EDITAR EL TÍTULO (h1) --- // --- 1. COMPONENTE PARA EDITAR EL TÍTULO SOBRE FONDO AZUL ---
function InlineEditTitle({ function InlineEditTitle({
value, value,
onSave, onSave,
@@ -61,7 +61,8 @@ function InlineEditTitle({
setIsEditing(false) setIsEditing(false)
} }
}} }}
className="bg-background text-foreground border-primary focus:ring-primary/20 w-full rounded-md border-2 px-2 py-1 text-3xl font-bold shadow-sm outline-none focus:ring-4" // Input estilizado para fondo oscuro: borde blanco sutil, texto blanco
className="focus:ring-primary/40 w-full rounded-md border-2 border-white/20 bg-transparent px-2 py-1 text-3xl font-bold text-white shadow-sm outline-none focus:ring-4"
/> />
) )
} }
@@ -69,15 +70,17 @@ function InlineEditTitle({
return ( return (
<h1 <h1
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
className="group text-foreground hover:bg-muted/50 flex cursor-pointer items-center gap-3 rounded-md px-2 py-1 text-3xl font-bold transition-colors" // Texto blanco por defecto, fondo blanco sutil al hover
className="group flex cursor-pointer items-center gap-3 rounded-md px-2 py-1 text-3xl font-bold text-white transition-colors hover:bg-white/5"
> >
{value} {value}
<Pencil className="text-muted-foreground hover:text-primary h-5 w-5 opacity-0 transition-all group-hover:opacity-100" /> {/* Lápiz blanco sutil */}
<Pencil className="h-5 w-5 text-white/50 opacity-0 transition-all group-hover:opacity-100 hover:text-white" />
</h1> </h1>
) )
} }
// --- 2. COMPONENTE PARA EDITAR LOS BADGES (Código, Créditos, Semestre) --- // --- 2. COMPONENTE PARA EDITAR LOS BADGES SOBRE FONDO AZUL ---
function InlineEditBadge({ function InlineEditBadge({
icon, icon,
label, label,
@@ -107,8 +110,9 @@ function InlineEditBadge({
if (isEditing) { if (isEditing) {
return ( return (
<div className="bg-background border-primary ring-primary/20 flex h-8 items-center gap-2 rounded-md border px-3 shadow-sm ring-2"> // Contenedor del input con estética de badge oscuro
<span className="text-muted-foreground text-xs font-medium tracking-wider uppercase"> <div className="focus:ring-primary/40 flex h-8 items-center gap-2 rounded-md border border-white/20 bg-white/5 px-3 shadow-sm ring-1 focus-within:ring-2">
<span className="text-xs font-medium tracking-wider text-white/60 uppercase">
{label}: {label}:
</span> </span>
<input <input
@@ -124,7 +128,8 @@ function InlineEditBadge({
setIsEditing(false) setIsEditing(false)
} }
}} }}
className="text-foreground w-16 bg-transparent text-sm font-semibold outline-none" // Texto blanco dentro del input
className="w-16 bg-transparent text-sm font-semibold text-white outline-none"
/> />
</div> </div>
) )
@@ -133,16 +138,19 @@ function InlineEditBadge({
return ( return (
<button <button
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
className="border-border bg-muted/30 hover:border-primary/40 hover:bg-muted group flex h-8 items-center gap-2 rounded-md border px-3 text-sm transition-all" // Badge oscuro: borde blanco sutil, texto blanco, fondo más claro al hover
className="group flex h-8 items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3 text-sm text-white transition-all hover:border-white/20 hover:bg-white/10"
> >
<span className="text-muted-foreground">{icon}</span> {/* Ícono blanco sutil */}
<span className="text-muted-foreground text-xs font-medium tracking-wider uppercase"> <span className="text-white/70">{icon}</span>
<span className="text-xs font-medium tracking-wider text-white/60 uppercase">
{label}: {label}:
</span> </span>
<span className="text-foreground font-semibold"> <span className="font-semibold text-white">
{value} {suffix} {value} {suffix}
</span> </span>
<Pencil className="text-muted-foreground h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100" /> {/* Lápiz blanco sutil */}
<Pencil className="h-3 w-3 text-white/50 opacity-0 transition-opacity group-hover:opacity-100" />
</button> </button>
) )
} }
@@ -212,19 +220,20 @@ function AsignaturaLayout() {
return ( return (
<div className="bg-background min-h-screen"> <div className="bg-background min-h-screen">
{/* HEADER DE LA ASIGNATURA */} {/* HEADER DE LA ASIGNATURA CON TU FONDO AZUL HARDCODEADO */}
<section className="bg-card border-border border-b pt-6 pb-8"> <section className="border-border border-b bg-[#0b1d3a] pt-6 pb-8">
<div className="mx-auto px-4 md:px-6 lg:px-8"> <div className="mx-auto px-4 md:px-6 lg:px-8">
<Link <Link
to="/planes/$planId/asignaturas" to="/planes/$planId/asignaturas"
params={{ planId }} params={{ planId }}
className="text-muted-foreground hover:text-foreground mb-4 flex w-fit items-center gap-2 text-sm transition-colors" // Enlace blanco sutil
className="mb-4 flex w-fit items-center gap-2 text-sm text-white/70 transition-colors hover:text-white"
> >
<ArrowLeft className="h-4 w-4" /> Volver al plan <ArrowLeft className="h-4 w-4" /> Volver al plan
</Link> </Link>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{/* Título Editable */} {/* Título Editable (Texto blanco controlado dentro del componente) */}
<div className="-ml-2"> <div className="-ml-2">
<InlineEditTitle <InlineEditTitle
value={headerData.nombre} value={headerData.nombre}
@@ -234,16 +243,16 @@ function AsignaturaLayout() {
{/* Fila de Metadatos Alineados */} {/* Fila de Metadatos Alineados */}
<div className="flex flex-wrap items-center gap-3"> <div className="flex flex-wrap items-center gap-3">
{/* Badge Estático del Tipo */} {/* Badge Estático del Tipo (Estilo oscuro sutil) */}
<Badge <Badge
variant="secondary" variant="outline"
className="flex h-8 items-center gap-1.5 px-3" className="flex h-8 items-center gap-1.5 border-white/10 bg-white/5 px-3 text-white hover:border-white/20 hover:bg-white/10"
> >
<Tag size={12} className="opacity-70" /> <Tag size={12} className="text-white/70" />
{asignaturaApi.tipo} {asignaturaApi.tipo}
</Badge> </Badge>
{/* Badges Editables */} {/* Badges Editables (Texto blanco controlado dentro de los componentes) */}
<InlineEditBadge <InlineEditBadge
icon={<Hash size={14} />} icon={<Hash size={14} />}
label="Código" label="Código"
@@ -273,11 +282,11 @@ function AsignaturaLayout() {
/> />
</div> </div>
{/* Subtítulo de contexto */} {/* Subtítulo de contexto (Texto blanco sutil) */}
<div className="text-muted-foreground mt-2 flex items-center gap-2 text-sm"> <div className="mt-2 flex items-center gap-2 text-sm text-white/70">
<GraduationCap className="h-4 w-4 shrink-0" /> <GraduationCap className="h-4 w-4 shrink-0 text-white/60" />
<span>Pertenece al plan:</span> <span>Pertenece al plan:</span>
<span className="text-foreground font-medium"> <span className="font-medium text-white">
{(asignaturaApi.planes_estudio as DatosPlan).nombre || ''} {(asignaturaApi.planes_estudio as DatosPlan).nombre || ''}
</span> </span>
</div> </div>
@@ -285,8 +294,8 @@ function AsignaturaLayout() {
</div> </div>
</section> </section>
{/* TABS NAVEGACIÓN */} {/* TABS NAVEGACIÓN (Se mantiene semántico para el cuerpo de la página) */}
<nav className="bg-background/80 border-border sticky top-0 z-20 border-b backdrop-blur-md"> <nav className="border-border bg-background/80 sticky top-0 z-20 border-b backdrop-blur-md">
<div className="mx-auto px-4 py-1 md:px-6 lg:px-8"> <div className="mx-auto px-4 py-1 md:px-6 lg:px-8">
<div className="scrollbar-hide flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-start"> <div className="scrollbar-hide flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-start">
{[ {[