Spaces:
Paused
Paused
| import React from 'react'; | |
| import { Check } from 'lucide-react'; | |
| export default function LogoutScreen({ user, onComplete }) { | |
| return ( | |
| <div style={{ | |
| minHeight: '100vh', | |
| display: 'flex', | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| backgroundColor: '#1b1d1e', // Dark background matching exact screenshot 1 | |
| padding: '1.5rem', | |
| fontFamily: 'system-ui, -apple-system, sans-serif' | |
| }}> | |
| <div style={{ | |
| width: '100%', | |
| maxWidth: '440px', | |
| background: '#ffffff', | |
| borderRadius: '8px', | |
| padding: '3rem 2rem', | |
| textAlign: 'center', | |
| boxShadow: '0 10px 30px rgba(0,0,0,0.5)' | |
| }}> | |
| {/* Green Check Circle */} | |
| <div style={{ | |
| width: '72px', | |
| height: '72px', | |
| borderRadius: '50%', | |
| border: '2px solid #86efac', | |
| display: 'flex', | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| margin: '0 auto 1.5rem' | |
| }}> | |
| <Check size={40} color="#22c55e" strokeWidth={2.5} /> | |
| </div> | |
| <h2 style={{ fontSize: '1.6rem', fontWeight: '700', color: '#2d3748', marginBottom: '0.8rem' }}> | |
| Cerrando Sesión | |
| </h2> | |
| <p style={{ fontSize: '0.9rem', color: '#718096', lineHeight: 1.5, marginBottom: '2rem' }}> | |
| ¡Hasta luego {user?.name || 'PATRICIA FERNANDEZ CUEVAS'}! Que tengas un excelente día, nos vemos pronto. | |
| </p> | |
| {/* Multicolor Spinner Circle */} | |
| <div style={{ | |
| width: '40px', | |
| height: '40px', | |
| margin: '0 auto', | |
| borderRadius: '50%', | |
| border: '4px solid transparent', | |
| borderTopColor: '#ea4335', | |
| borderRightColor: '#4285f4', | |
| borderBottomColor: '#fbbc05', | |
| borderLeftColor: '#34a853', | |
| animation: 'spin 1s linear infinite' | |
| }} /> | |
| <style>{` | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| `}</style> | |
| </div> | |
| </div> | |
| ); | |
| } | |