Entorno linteado y typechecado

src/components/Header.tsx

@@ -1,7 +1,6 @@
 import { Link } from '@tanstack/react-router'
-
-import { useState } from 'react'
 import { Home, Menu, Network, X } from 'lucide-react'
+import { useState } from 'react'
 
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false)

src/components/dashboard/DashboardHeader.tsx

@@ -2,23 +2,23 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
 
 interface DashboardHeaderProps {
-  name: string
-  role: string
-  department: string
-  greeting?: string
+  nombre: string
+  rol: string
+  facultad: string
+  saludo?: string
 }
 
 export default function DashboardHeader({
-  name,
-  role,
-  department,
-  greeting = 'Buenas noches,',
+  nombre,
+  rol,
+  facultad,
+  saludo = 'Buenas noches,',
 }: DashboardHeaderProps) {
   // Generamos la URL de DiceBear dinámicamente con el nombre
-  const dicebearUrl = `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(name)}`
+  const dicebearUrl = `https://api.dicebear.com/9.x/initials/svg?seed=${encodeURIComponent(nombre)}`
 
   // Calculamos iniciales de respaldo por si falla la imagen
-  const initials = name
+  const initials = nombre
     .split(' ')
     .map((n) => n[0])
     .slice(0, 2)
@@ -30,17 +30,17 @@ export default function DashboardHeader({
       <div className="flex flex-row items-center gap-4">
         {/* 1. Avatar de DiceBear usando el componente de Shadcn */}
         <Avatar className="border-background h-12 w-12 border-2 shadow-sm">
-          <AvatarImage src={dicebearUrl} alt={name} />
+          <AvatarImage src={dicebearUrl} alt={nombre} />
           <AvatarFallback>{initials}</AvatarFallback>
         </Avatar>
 
         <div className="flex flex-col">
           {/* Saludo con texto secundario */}
-          <p className="text-muted-foreground text-sm">{greeting}</p>
+          <p className="text-muted-foreground text-sm">{saludo}</p>
 
           {/* Nombre destacado */}
           <h2 className="text-foreground text-lg font-bold tracking-tight">
-            {name}
+            {nombre}
           </h2>
 
           <div className="mt-1 flex flex-wrap items-center gap-2">
@@ -49,17 +49,17 @@ export default function DashboardHeader({
               variant="secondary"
               className="rounded-md px-2 py-0 text-xs font-semibold"
             >
-              {role}
+              {rol}
             </Badge>
 
             {/* Departamento */}
             <span className="text-muted-foreground text-xs font-medium">
-              {department}
+              {facultad}
             </span>
           </div>
         </div>
       </div>
-      <div className="xs:flex-nowrap flex flex-row flex-wrap gap-6">
+      <div className="flex flex-row flex-wrap gap-6 sm:flex-nowrap">
         <div className="bg-muted flex flex-row items-center gap-3 rounded-lg px-4 py-2">
           <div className="bg-primary/10 flex h-10 w-10 items-center justify-center rounded-lg">
             Icono

src/components/plan_estudios/PlanEstudiosCard.tsx

@@ -1,4 +1,7 @@
-import { ArrowRight, type LucideIcon } from 'lucide-react'
+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

src/components/ui/avatar.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 

src/components/ui/badge.tsx

@@ -1,6 +1,8 @@
-import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva  } from "class-variance-authority"
+import * as React from "react"
+
+import type {VariantProps} from "class-variance-authority";
 
 import { cn } from "@/lib/utils"
 

src/lib/utils.ts

@@ -1,6 +1,8 @@
-import { clsx, type ClassValue } from 'clsx'
+import { clsx  } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-export function cn(...inputs: ClassValue[]) {
+import type {ClassValue} from 'clsx';
+
+export function cn(...inputs: Array<ClassValue>) {
   return twMerge(clsx(inputs))
 }

src/main.tsx

@@ -1,14 +1,12 @@
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
-import { RouterProvider, createRouter } from '@tanstack/react-router'
 
 import * as TanStackQueryProvider from './integrations/tanstack-query/root-provider.tsx'
-
-// Import the generated route tree
+import reportWebVitals from './reportWebVitals.ts'
 import { routeTree } from './routeTree.gen'
 
 import './styles.css'
-import reportWebVitals from './reportWebVitals.ts'
 
 // Create a new router instance
 

src/routes/__root.tsx

@@ -1,9 +1,8 @@
+import { TanStackDevtools } from '@tanstack/react-devtools'
 import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
 
 import Header from '../components/Header'
-
 import TanStackQueryDevtools from '../integrations/tanstack-query/devtools'
 
 import type { QueryClient } from '@tanstack/react-query'

src/routes/dashboard.tsx

@@ -1,4 +1,4 @@
-import DashboardHeader from '@/components/dashboard/DashboardHeader'
+import { createFileRoute } from '@tanstack/react-router'
 import {
   ArrowRight,
   BookOpenText,
@@ -11,8 +11,9 @@ import {
   PencilRuler,
   ClipboardCheck,
 } from 'lucide-react'
+
+import DashboardHeader from '@/components/dashboard/DashboardHeader'
 import PlanEstudiosCard from '@/components/plan_estudios/PlanEstudiosCard'
-import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/dashboard')({
   component: RouteComponent,
@@ -31,9 +32,9 @@ function RouteComponent() {
       */}
       <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 px-4 py-6 md:px-6 lg:px-8">
         <DashboardHeader
-          name="Dr. Carlos Mendoza"
-          role="Jefe de Carrera"
-          department="Facultad de Ingeniería"
+          nombre="Dr. Carlos Mendoza"
+          rol="Jefe de Carrera"
+          facultad="Facultad de Ingeniería"
         />
 
         <div className="mt-6 grid gap-6 lg:grid-cols-3">

src/routes/demo/tanstack-query.tsx

@@ -1,5 +1,5 @@
-import { createFileRoute } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/demo/tanstack-query')({
   component: TanStackQueryDemo,

src/routes/index.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
+
 import logo from '../logo.svg'
 
 export const Route = createFileRoute('/')({

vite.config.ts

@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from "node:url";
+
 import tailwindcss from "@tailwindcss/vite";
 import { devtools } from "@tanstack/devtools-vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";