Mentors - Copy this React, Tailwind Component to your project

I have a dashboard consisting of a sidebar , navbar and main section in mention I have mentors card in which there is button for view profile edit my given component as after clicking on main section only is full profile should come instead of mentors card and also there should be an X symbol to touch and go back , code is import React, { useState } from 'react'; import { FaUser, FaBlog, FaUserTie, FaCalendar, FaQuestionCircle, FaSignOutAlt, FaStar, FaSearch } from 'react icons/fa'; const mentors = [ { id: 1, name: 'John Doe', rating: 4.8, specialty: 'Web Development' }, { id: 2, name: 'Jane Smith', rating: 4.9, specialty: 'Data Science' }, { id: 3, name: 'Mike Johnson', rating: 4.7, specialty: 'Mobile App Development' }, { id: 4, name: 'Sarah Brown', rating: 4.6, specialty: 'UI/UX Design' }, ]; const Dashboard = () => { const [searchTerm, setSearchTerm] = useState(''); const handleSearch = (e) => { setSearchTerm(e.target.value); }; return ( <div className="flex h screen bg [#050816]"> {/* Sidebar */} <div className="w 64 bg gray 900 text white p 6 flex flex col justify between"> <div> <h2 className="text 2xl font bold mb 6">Dashboard</h2> <nav> <ul className="space y 4"> <li> <a href="#" className="flex items center space x 2 hover:text blue 400 transition"> <FaUser /> <span>Profile</span> </a> </li> <li> <a href="#" className="flex items center space x 2 hover:text blue 400 transition"> <FaBlog /> <span>Blogs</span> </a> </li> <li> <a href="#" className="flex items center space x 2 hover:text blue 400 transition"> <FaUserTie /> <span>Mentors</span> </a> </li> <li> <a href="#" className="flex items center space x 2 hover:text blue 400 transition"> <FaCalendar /> <span>Schedule</span> </a> </li> <li> <a href="#" className="flex items center space x 2 hover:text blue 400 transition"> <FaQuestionCircle /> <span>Help and Support</span> </a> </li> </ul> </nav> </div> <button className="flex items center space x 2 hover:text red 400 transition"> <FaSignOutAlt /> <span>Logout</span> </button> </div> <div className="flex 1 flex flex col"> {/* Navbar */} <header className="bg gray 800 p 4"> <div className="max w 4xl mx auto"> <div className="relative"> <input type="text" placeholder="Search" className="w full bg gray 700 text white rounded full py 2 px 4 pl 10 focus:outline none focus:ring 2 focus:ring blue 500" value={searchTerm} onChange={handleSearch} /> <FaSearch className="absolute left 3 top 3 text gray 400" /> </div> </div> </header> {/* Main Content */} <main className="flex 1 overflow y auto p 6"> <div className="max w 4xl mx auto"> <h1 className="text 3xl font bold text white mb 6">Mentors</h1> <div className="grid grid cols 1 md:grid cols 2 gap 6"> {mentors.map((mentor) => ( <div key={mentor.id} className="bg gray 800 rounded lg shadow lg p 6 hover:shadow xl transition"> <h2 className="text 2xl font bold text white mb 2">{mentor.name}</h2> <div className="flex items center mb 2"> <div className="flex text yellow 400 mr 2"> {[...Array(5)].map((_, i) => ( <FaStar key={i} className={i < Math.floor(mentor.rating) ? 'text yellow 400' : 'text gray 400'} /> ))} </div> <span className="text white">{mentor.rating.toFixed(1)}</span> </div> <p className="text gray 300">{mentor.specialty}</p> <button className="mt 4 bg blue 500 hover:bg blue 600 text white font bold py 2 px 4 rounded transition"> View Profile </button> </div> ))} </div> </div> </main> </div> </div> ); }; export default Dashboard;