Responsive Page - Copy this React, Tailwind Component to your project

this page:import { FiEdit2, FiSettings, FiBell, FiCreditCard, FiLogOut, FiUser, FiMail, FiMapPin } from "react-icons/fi"; import { logout } from '../../services/auth'; import useUserData from '../../hooks/useUserData'; import Navbar from "../common/NavBar"; const UserProfile = () => { const user = useUserData(); console.log(user); if (!user) { return <div className="text-center text-lg text-gray-500">Loading...</div>; } const handleLogout = async () => { await logout(); window.location.href = '/login'; }; return ( <div className="min-h-screen bg-gray-50 text-gray-800"> <Navbar /> <div className="container mx-auto px-4 py-8"> {/* Profile Header */} <div className="flex flex-col items-center mb-8"> <div className="relative"> <div className="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center text-2xl font-bold text-gray-700"> {user.username.charAt(0)} </div> <button className="absolute bottom-0 right-0 bg-blue-500 p-2 rounded-full text-white hover:bg-blue-600 transition-colors" aria-label="Edit profile" > <FiEdit2 className="w-4 h-4" /> </button> </div> <h1 className="text-2xl font-bold mt-4">{user.username}</h1> </div> {/* User Information Section */} <div className="bg-white shadow-lg rounded-lg p-6 mb-8"> <h2 className="text-xl font-semibold mb-4 text-purple-600">Personal Information</h2> <div className="space-y-4"> <div className="flex items-center"> <FiUser className="w-5 h-5 mr-3 text-gray-500" /> <div> <p className="text-sm text-gray-500">Username</p> <p className="font-medium">{user.username}</p> </div> </div> <div className="flex items-center"> <FiMail className="w-5 h-5 mr-3 text-gray-500" /> <div> <p className="text-sm text-gray-500">Email</p> <p className="font-medium">{user.email}</p> </div> </div> <div className="flex items-center"> <FiMapPin className="w-5 h-5 mr-3 text-gray-500" /> <div> <p className="text-sm text-gray-500">Role</p> <p className="font-medium">{user.role}</p> </div> </div> </div> </div> {/* Settings Section */} <div className="bg-white shadow-lg rounded-lg p-6"> <h2 className="text-xl font-semibold mb-4 text-purple-600">Settings</h2> <div className="space-y-6"> <div className="flex items-center justify-between"> <div className="flex items-center"> <FiBell className="w-5 h-5 mr-3 text-gray-500" /> <div> <p className="font-medium">Notifications</p> <p className="text-sm text-gray-500">Receive push notifications</p> </div> </div> <button className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${ user.settings?.notifications ? "bg-blue-500" : "bg-gray-200" }`} role="switch" aria-checked={user.settings?.notifications} > <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${ user.settings?.notifications ? "translate-x-5" : "translate-x-0" }`} /> </button> </div> <div className="flex items-center justify-between"> <div className="flex items-center"> <FiSettings className="w-5 h-5 mr-3 text-gray-500" /> <div> <p className="font-medium">Dark Mode</p> <p className="text-sm text-gray-500">Coming Soon</p> </div> </div> <button className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-not-allowed rounded-full border-2 border-transparent bg-gray-200" role="switch" aria-checked="false" disabled > <span className="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-0" /> </button> </div> <div className="flex items-center justify-between"> <div className="flex items-center"> <FiCreditCard className="w-5 h-5 mr-3 text-gray-500" /> <div> <p className="font-medium">Payment Methods</p> <p className="text-sm text-gray-500">Manage your payment options</p> </div> </div> <button className="text-blue-500 hover:text-blue-600 font-medium">Manage</button> </div> <button className="w-full flex items-center justify-center space-x-2 bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-600 transition-colors" onClick={handleLogout} > <FiLogOut className="w-5 h-5" /> <span>Logout</span> </button> </div> </div> </div> </div> ); }; export default UserProfile;