Files
edueasy/components/child/no-child-error.tsx
T

54 lines
1.8 KiB
TypeScript

"use client"
import { useRouter } from "next/navigation"
import { GatoMascota } from "./gato-mascota"
const CHILD_ID_KEY = "edueasy_child_id"
interface Props {
onRetry?: () => void
}
export default function NoChildError({ onRetry }: Props) {
const router = useRouter()
const hasChildId = typeof window !== "undefined" && localStorage.getItem(CHILD_ID_KEY)
return (
<div className="flex-1 flex flex-col items-center justify-center p-8 gap-6">
<GatoMascota mood="coach" message={hasChildId ? "Ups, hubo un problema" : "Todavía no estoy conectado"} size="lg" />
<div className="text-center max-w-xs">
{hasChildId ? (
<p className="text-foreground/60">
No pude conectar con el servidor. Revisá la conexión.
</p>
) : (
<>
<p className="text-foreground/60">Pedile a mamá que te empareje desde su celular.</p>
<p className="text-foreground/40 text-sm mt-1">Mamá va a Dashboard Emparejar nuevo iPad</p>
</>
)}
</div>
<div className="flex gap-3">
{hasChildId && onRetry && (
<button
onClick={onRetry}
className="bg-primary text-primary-foreground touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold"
>
Reintentar
</button>
)}
<button
onClick={() => router.push("/child/pairing")}
className={`touch-target-lg rounded-2xl px-8 py-4 text-xl font-display font-bold ${
hasChildId
? "bg-secondary text-secondary-foreground"
: "bg-primary text-primary-foreground"
}`}
>
{hasChildId ? "Emparejar otro iPad" : "Ir a emparejar"}
</button>
</div>
</div>
)
}