Dummy Component - Copy this React, Tailwind Component to your project

Import React, { useState, useEffect } from "react"; import { Container, Row, Col } from "react bootstrap"; import FacialRecognition from "./components/FacialRecognition/FacialRecognition.jsx"; import EmployeeCRUD from "./components/EmployeeCRUD.jsx"; import SeeEmployee from "./components/SeeEmployee.jsx"; import SafetyDetection from "./components/SafetyDetection.jsx"; import LoadDashboards from "./components/ReportsMarking.jsx"; import EnterpriseCRUD from "./components/EnterpriseCRUD.jsx"; import Login from "./components/Login/Login.jsx"; import NavigationBar from "./components/Navbar/Navbar.jsx"; import AuthCRUD from "./components/AuthCRUD.jsx"; import ReportsDashboard from "./components/ReportDashboard.jsx"; import ManageAbsences from "./components/ManageAbsences.jsx"; import config from "./config/config.js"; function App() { const [activeComponent, setActiveComponent] = useState("reconocimiento"); const [isLoggedIn, setIsLoggedIn] = useState(false); const [token, setToken] = useState(null); const [admin, setAdmin] = useState({}); useEffect(() => { const savedToken = localStorage.getItem("token"); if (savedToken) { validateToken(savedToken); } }, []); const validateToken = async (token) => { try { const response = await fetch(`${config.apiUrl}/verify token`, { method: "POST", headers: { "Content Type": "application/json", Authorization: `Bearer ${token}`, }, }); const data = await response.json(); if (data.success) { setIsLoggedIn(true); setToken(token); setAdmin(data.admin); } else { handleLogout(); } } catch (error) { handleLogout(); } }; const handleLogin = (token, adminData) => { localStorage.setItem("token", token); setToken(token); setIsLoggedIn(true); setAdmin(adminData); setActiveComponent("reconocimiento"); }; const handleLogout = () => { localStorage.removeItem("token"); setToken(null); setIsLoggedIn(false); setAdmin({}); setActiveComponent("reconocimiento"); }; const renderComponent = () => { switch (activeComponent) { case "reconocimiento": return <FacialRecognition />; case "crear empleado": return isLoggedIn ? <EmployeeCRUD /> : <Login onLogin={handleLogin} />; case "ver empleados": return isLoggedIn ? <SeeEmployee /> : <Login onLogin={handleLogin} />; case "seguridad": return <SafetyDetection />; case "asistencia": return <LoadDashboards />; case "reports": return <ReportsDashboard />; case "mi organizacion": return isLoggedIn ? ( <EnterpriseCRUD /> ) : ( <Login onLogin={handleLogin} /> ); case "actualizar auth": return isLoggedIn ? ( <AuthCRUD admin={admin} /> ) : ( <Login onLogin={handleLogin} /> ); case "ver ausencias": return isLoggedIn ? ( <ManageAbsences admin={admin} /> ) : ( <Login onLogin={handleLogin} /> ); case "login": return <Login onLogin={handleLogin} />; default: return <FacialRecognition />; } }; return ( <> <NavigationBar onSelect={setActiveComponent} isLoggedIn={isLoggedIn} handleLogout={handleLogout} /> <Container fluid style={{ marginTop: "20px" }}> <Row> <Col md={12}>{renderComponent()}</Col> </Row> </Container> </> ); } export default App; Puedes mejorar la estructura de mis elemntos, y poner de fondo colores coporativos, no debería de cambiar demasiado, pero si que tome una estetcia relacionada al aspecto cromatico que trabajamos, ya sabes, estos colores:[#07143d] to [#f4f4f8]