Tab Bar - Copy this React, Tailwind Component to your project
Import React, { useState } from "react"; import { FaChartBar, FaMoneyBillWave, FaReceipt, FaBoxes } from "react icons/fa"; import Analytics from "./Analytics"; import IngresoData from "./IngresoData"; import Egresos from "./Egresos"; import Inventario from "./Inventario"; const AdminDashboard = () => { const [activeTab, setActiveTab] = useState("analytics"); const renderActiveTab = () => { switch (activeTab) { case "analytics": return <Analytics />; case "ingresos": return <IngresoData />; case "egresos": return <Egresos />; case "inventario": return <Inventario />; default: return null; } }; return ( <div className="flex min h screen"> {/* Tab Bar Lateral */} <div className="w 64 bg gray 800 text white flex flex col p 4 space y 4"> <h1 className="text 2xl font bold mb 8">TomasitoUwU</h1> <button className={`p 4 rounded lg flex items center justify start space x 2 ${ activeTab === "analytics" ? "bg blue 500" : "bg gray 800 hover:bg gray 700" }`} onClick={() => setActiveTab("analytics")} > <FaChartBar /> <span>Analytics</span> </button> <button className={`p 4 rounded lg flex items center justify start space x 2 ${ activeTab === "ingresos" ? "bg blue 500" : "bg gray 800 hover:bg gray 700" }`} onClick={() => setActiveTab("ingresos")} > <FaMoneyBillWave /> <span>Ingresos</span> </button> <button className={`p 4 rounded lg flex items center justify start space x 2 ${ activeTab === "egresos" ? "bg blue 500" : "bg gray 800 hover:bg gray 700" }`} onClick={() => setActiveTab("egresos")} > <FaReceipt /> <span>Egresos</span> </button> <button className={`p 4 rounded lg flex items center justify start space x 2 ${ activeTab === "inventario" ? "bg blue 500" : "bg gray 800 hover:bg gray 700" }`} onClick={() => setActiveTab("inventario")} > <FaBoxes /> <span>Inventario</span> </button> </div> {/* Contenido Principal */} <div className="flex 1 p 8 bg gray 100"> <h1 className="text 4xl font bold mb 8">Panel de Administración</h1> {renderActiveTab()} </div> </div> ); }; export default AdminDashboard; Can you modify the tab bar on the left and make it prettier and with animation?
