106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { Button, Card, CardBody } from '../ui';
|
|
import { PublicLayout } from '../layout';
|
|
import { AlertCircle, RefreshCw, Home, HelpCircle } from 'lucide-react';
|
|
|
|
interface Props {
|
|
error: string;
|
|
details?: Array<{ service: string; error_message: string }>;
|
|
onRetry: () => void;
|
|
isRetrying?: boolean;
|
|
}
|
|
|
|
export const DemoErrorScreen: React.FC<Props> = ({
|
|
error,
|
|
details,
|
|
onRetry,
|
|
isRetrying = false,
|
|
}) => {
|
|
return (
|
|
<PublicLayout
|
|
variant="centered"
|
|
headerProps={{
|
|
showThemeToggle: true,
|
|
showAuthButtons: false,
|
|
}}
|
|
>
|
|
<div className="max-w-2xl mx-auto p-8">
|
|
<Card className="shadow-xl">
|
|
<CardBody className="p-8 text-center">
|
|
<div className="flex justify-center mb-4">
|
|
<AlertCircle className="w-20 h-20 text-[var(--color-error)]" />
|
|
</div>
|
|
|
|
<h1 className="text-3xl font-bold text-[var(--color-error)] mb-3">
|
|
Error en la Configuración del Demo
|
|
</h1>
|
|
|
|
<p className="text-[var(--text-secondary)] mb-6 text-lg">
|
|
{error}
|
|
</p>
|
|
|
|
{details && details.length > 0 && (
|
|
<div className="mb-6 p-4 bg-[var(--color-error)]/10 border border-[var(--color-error)] rounded-lg text-left">
|
|
<h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">
|
|
Detalles del error:
|
|
</h3>
|
|
<ul className="space-y-2">
|
|
{details.map((detail, idx) => (
|
|
<li key={idx} className="text-sm">
|
|
<span className="font-medium text-[var(--text-primary)]">
|
|
{detail.service}:
|
|
</span>{' '}
|
|
<span className="text-[var(--text-secondary)]">
|
|
{detail.error_message}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col gap-3 max-w-md mx-auto mt-6">
|
|
<Button
|
|
onClick={onRetry}
|
|
disabled={isRetrying}
|
|
variant="primary"
|
|
size="lg"
|
|
className="w-full"
|
|
>
|
|
<RefreshCw className={`w-5 h-5 mr-2 ${isRetrying ? 'animate-spin' : ''}`} />
|
|
{isRetrying ? 'Reintentando...' : 'Reintentar Configuración'}
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={() => window.location.href = '/demo'}
|
|
variant="secondary"
|
|
size="lg"
|
|
className="w-full"
|
|
>
|
|
<Home className="w-5 h-5 mr-2" />
|
|
Volver a la Página Demo
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={() => window.location.href = '/contact'}
|
|
variant="ghost"
|
|
size="lg"
|
|
className="w-full"
|
|
>
|
|
<HelpCircle className="w-5 h-5 mr-2" />
|
|
Contactar Soporte
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<p className="text-xs text-[var(--text-tertiary)]">
|
|
Si el problema persiste, por favor contacta a nuestro equipo de soporte.
|
|
</p>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</PublicLayout>
|
|
);
|
|
};
|