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

import React from 'react' import { FaBell, FaChartBar, FaClipboardList, FaFire, FaUsersCog } from 'react-icons/fa' import { Link } from 'react-router-dom' const FireNOCDashboard = () => { const isSidebarOpen = true return ( <div className='flex min-h-screen'> <div className={`bg-gray-800 ${ isSidebarOpen ? 'w-64' : 'w-20' } transition-all duration-300 p-4`} > <div className='flex items-center justify-center mb-8'> <FaFire className='text-[#FF4500] text-3xl' /> {isSidebarOpen && ( <span className='text-white ml-2 text-xl font-bold'>Fire NOC</span> )} </div> <nav> {[ { icon: FaChartBar, label: 'Dashboard', path: '/' }, { icon: FaClipboardList, label: 'NOC Requests', path: '/request-approval' }, { icon: FaBell, label: 'Notifications', path: '/notifications' }, { icon: FaUsersCog, label: 'Users', path: '/user-details' } ].map((item, index) => ( <Link to={item?.path}> <div key={index} className='flex items-center text-gray-300 hover:text-white hover:bg-gray-700 p-3 rounded-lg cursor-pointer mb-2' > <item.icon className='text-xl' /> {isSidebarOpen && <span className='ml-3'>{item.label}</span>} </div> </Link> ))} </nav> </div> </div> ) } export default FireNOCDashboard here i have dashboard in this i want to create buttom user details like avtar and the admin name and logout bottom and i want to create the login sign up page which is the more responsive