Portal Data - Copy this React, Tailwind Component to your project

Import React, { useState } from 'react'; import { Users, UserCog, Shield, Mail, Lock, ArrowLeft } from 'lucide react'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Alert, AlertDescription } from "@/components/ui/alert"; const LoginPortals = () => { const [selectedPortal, setSelectedPortal] = useState(null); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const portals = [ { id: 'admin', title: 'Portail Admin', icon: Shield, description: 'Administration du système', color: 'bg purple 500' }, { id: 'manager', title: 'Portail Responsable', icon: UserCog, description: 'Gestion des équipements et interventions', color: 'bg green 500' }, { id: 'teacher', title: 'Portail Enseignant', icon: Users, description: 'Accès au système de demande d\'intervention', color: 'bg blue 500' } ]; const handleLogin = (e) => { e.preventDefault(); if (!email || !password) { setError('Veuillez remplir tous les champs'); return; } // Ici nous simulerons la connexion console.log('Tentative de connexion:', { portal: selectedPortal, email, password }); // Ajouter la logique d'authentification réelle ici }; const PortalSelector = () => ( <div className="grid grid cols 1 md:grid cols 3 gap 6 max w 6xl mx auto p 6"> {portals.map((portal) => ( <Card key={portal.id} className="hover:shadow lg transition shadow cursor pointer" onClick={() => setSelectedPortal(portal.id)} > <CardHeader> <div className={`w 12 h 12 rounded full ${portal.color} flex items center justify center mb 4`}> <portal.icon className="text white" size={24} /> </div> <CardTitle>{portal.title}</CardTitle> <CardDescription>{portal.description}</CardDescription> </CardHeader> </Card> ))} </div> ); const LoginForm = () => { const portal = portals.find(p => p.id === selectedPortal); return ( <div className="max w md mx auto p 6"> <button onClick={() => setSelectedPortal(null)} className="flex items center text gray 600 mb 6 hover:text gray 900" > <ArrowLeft className="mr 2" size={20} /> Retour aux portails </button> <Card> <CardHeader> <div className={`w 12 h 12 rounded full ${portal.color} flex items center justify center mb 4`}> <portal.icon className="text white" size={24} /> </div> <CardTitle>{portal.title}</CardTitle> <CardDescription>Connectez vous pour accéder à votre espace</CardDescription> </CardHeader> <CardContent> <form onSubmit={handleLogin} className="space y 4"> <div> <div className="relative"> <Mail className="absolute left 3 top 3 text gray 400" size={20} /> <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} className="pl 10 pr 4 py 2 w full border rounded md focus:outline none focus:ring 2 focus:ring blue 500" /> </div> </div> <div> <div className="relative"> <Lock className="absolute left 3 top 3 text gray 400" size={20} /> <input type="password" placeholder="Mot de passe" value={password} onChange={(e) => setPassword(e.target.value)} className="pl 10 pr 4 py 2 w full border rounded md focus:outline none focus:ring 2 focus:ring blue 500" /> </div> </div> {error && ( <Alert variant="destructive"> <AlertDescription>{error}</AlertDescription> </Alert> )} <button type="submit" className={`w full py 2 px 4 text white rounded md ${portal.color} hover:opacity 90 transition opacity`} > Se connecter </button> </form> </CardContent> <CardFooter className="justify center"> <a href="#" className="text sm text gray 600 hover:text gray 900"> Mot de passe oublié ? </a> </CardFooter> </Card> </div> ); }; return ( <div className="min h screen bg gray 50"> <div className="container mx auto py 8"> <h1 className="text 3xl font bold text center mb 8"> Système de Gestion de Maintenance </h1> {selectedPortal ? <LoginForm /> : <PortalSelector />} </div> </div> ); }; export default LoginPortals;