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

Import { useState } from "react"; import { FiHome, FiInfo, FiBriefcase, FiMail, FiMenu, FiX } from "react icons/fi"; import { FaProjectDiagram, FaList, FaBook, FaRunning, FaClipboardList, FaChartLine, FaCode, FaFileAlt, FaCalendar } from "react icons/fa"; const NavigationPage = () => { const [activeSection, setActiveSection] = useState("home"); const [isMenuOpen, setIsMenuOpen] = useState(false); const navigationItems = [ { id: 1, label: "Project Details", icon: <FaProjectDiagram />, description: "Overview of project specifics" }, { id: 2, label: "Backlog", icon: <FaList />, description: "Unassigned and pending tasks" }, { id: 3, label: "Story", icon: <FaBook />, description: "User stories and requirements" }, { id: 4, label: "Sprints", icon: <FaRunning />, description: "Current and upcoming sprint planning" }, { id: 5, label: "Board", icon: <FaClipboardList />, description: "Task management and workflow visualization" }, { id: 6, label: "Progress", icon: <FaChartLine />, description: "Project progress tracking and metrics" }, { id: 7, label: "Code", icon: <FaCode />, description: "Code repository and version control" }, { id: 8, label: "Summary", icon: <FaFileAlt />, description: "Project summary and key insights" }, { id: 9, label: "Calendar", icon: <FaCalendar />, description: "Project timelines and important dates" }, ]; const toggleMenu = () => setIsMenuOpen(!isMenuOpen); const handleMenuClick = (sectionId) => { setActiveSection(sectionId); setIsMenuOpen(false); }; return ( <div className="min h screen bg gray 50"> <nav className="bg white shadow lg fixed w full top 0 z 50"> <div className="max w 7xl mx auto px 4 sm:px 6 lg:px 8"> <div className="flex justify between h 16"> {/* Desktop Menu */} <div className="hidden md:flex items center space x 8"> {navigationItems.map((item) => ( <button key={item.id} onClick={() => handleMenuClick(item.id)} className={`flex items center space x 2 px 3 py 2 rounded md text sm font medium transition colors duration 200 focus:outline none focus:ring 2 focus:ring offset 2 focus:ring indigo 500 ${ activeSection === item.id ? "bg indigo 600 text white" : "text gray 600 hover:bg indigo 50 hover:text indigo 600" }`} aria current={activeSection === item.id ? "page" : undefined} > {item.icon} <span>{item.label}</span> </button> ))} </div> {/* Mobile menu button */} <div className="md:hidden flex items center"> <button onClick={toggleMenu} className="inline flex items center justify center p 2 rounded md text gray 400 hover:text gray 500 hover:bg gray 100 focus:outline none focus:ring 2 focus:ring inset focus:ring indigo 500" aria expanded="false" > {isMenuOpen ? ( <FiX className="block h 6 w 6" /> ) : ( <FiMenu className="block h 6 w 6" /> )} </button> </div> </div> </div> {/* Mobile Menu */} {isMenuOpen && ( <div className="md:hidden"> <div className="px 2 pt 2 pb 3 space y 1"> {navigationItems.map((item) => ( <button key={item.id} onClick={() => handleMenuClick(item.id)} className={`w full flex items center space x 2 px 3 py 2 rounded md text base font medium transition colors duration 200 ${ activeSection === item.id ? "bg indigo 600 text white" : "text gray 600 hover:bg indigo 50 hover:text indigo 600" }`} aria current={activeSection === item.id ? "page" : undefined} > {item.icon} <span>{item.label}</span> </button> ))} </div> </div> )} </nav> {/* Content Sections */} <div className="pt 16"> {activeSection === "home" && ( <section className="min h screen bg white px 4 py 16"> <div className="max w 7xl mx auto"> <h2 className="text 3xl font bold text gray 900">Welcome Home</h2> <p className="mt 4 text gray 600">This is the home section content.</p> </div> </section> )} {activeSection === "about" && ( <section className="min h screen bg gray 50 px 4 py 16"> <div className="max w 7xl mx auto"> <h2 className="text 3xl font bold text gray 900">About Us</h2> <p className="mt 4 text gray 600">Learn more about our company and mission.</p> </div> </section> )} {activeSection === "services" && ( <section className="min h screen bg white px 4 py 16"> <div className="max w 7xl mx auto"> <h2 className="text 3xl font bold text gray 900">Our Services</h2> <p className="mt 4 text gray 600">Explore our range of services.</p> </div> </section> )} {activeSection === "contact" && ( <section className="min h screen bg gray 50 px 4 py 16"> <div className="max w 7xl mx auto"> <h2 className="text 3xl font bold text gray 900">Contact Us</h2> <p className="mt 4 text gray 600">Get in touch with our team.</p> </div> </section> )} </div> </div> ); }; export default NavigationPage;