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

Import React, { useState } from "react"; import { FiEdit2, FiCamera, FiLogOut } from "react icons/fi"; import { AiOutlineHeart, AiOutlineUser } from "react icons/ai"; import { BsGrid, BsPlay } from "react icons/bs"; import { ToastContainer, toast } from "react toastify"; import "react toastify/dist/ReactToastify.css"; const UserAccount = () => { const [isEditing, setIsEditing] = useState(false); const [userName, setUserName] = useState("John Doe"); const [showPasswordForm, setShowPasswordForm] = useState(false); const [showFollowersModal, setShowFollowersModal] = useState(false); const [activeTab, setActiveTab] = useState("posts"); const [profileImage, setProfileImage] = useState("https://images.unsplash.com/photo 1472099645785 5658abf4ff4e?ixlib=rb 1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"); const dummyPosts = [ { id: 1, image: "https://images.unsplash.com/photo 1501785888041 af3ef285b470", likes: 120 }, { id: 2, image: "https://images.unsplash.com/photo 1506744038136 46273834b3fb", likes: 230 }, { id: 3, image: "https://images.unsplash.com/photo 1469474968028 56623f02e42e", likes: 450 } ]; const handleImageUpload = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { setProfileImage(reader.result); toast.success("Profile picture updated successfully!"); }; reader.readAsDataURL(file); } }; const handleNameSubmit = (e) => { e.preventDefault(); if (userName.trim()) { setIsEditing(false); toast.success("Name updated successfully!"); } else { toast.error("Name cannot be empty!"); } }; const PasswordUpdateForm = () => ( <form className="mt 4 space y 4"> <div> <label className="block text sm font medium text gray 700">Current Password</label> <input type="password" className="mt 1 block w full rounded md border gray 300 shadow sm focus:border blue 500 focus:ring blue 500" /> </div> <div> <label className="block text sm font medium text gray 700">New Password</label> <input type="password" className="mt 1 block w full rounded md border gray 300 shadow sm focus:border blue 500 focus:ring blue 500" /> </div> <button className="w full bg blue 600 text white py 2 px 4 rounded md hover:bg blue 700 transition duration 200"> Update Password </button> </form> ); const FollowersModal = () => ( <div className="fixed inset 0 bg black bg opacity 50 flex items center justify center z 50"> <div className="bg white rounded lg p 6 w full max w md"> <div className="flex justify between items center mb 4"> <h3 className="text lg font semibold">Followers</h3> <button onClick={() => setShowFollowersModal(false)} className="text gray 500 hover:text gray 700"> × </button> </div> <div className="space y 4"> {[1, 2, 3].map((follower) => ( <div key={follower} className="flex items center gap 3 p 2 hover:bg gray 50 rounded md"> <AiOutlineUser className="w 10 h 10 bg gray 200 rounded full p 2" /> <div> <p className="font medium">User {follower}</p> <p className="text sm text gray 500">@user{follower}</p> </div> </div> ))} </div> </div> </div> ); return ( <div className="max w 4xl mx auto px 4 py 8"> <ToastContainer /> <div className="bg white rounded lg shadow p 6 mb 6"> <div className="flex flex col md:flex row items center gap 6"> <div className="relative group"> <img src={profileImage} alt="Profile" className="w 32 h 32 rounded full object cover" /> <label className="absolute inset 0 flex items center justify center bg black bg opacity 40 rounded full opacity 0 group hover:opacity 100 cursor pointer transition"> <FiCamera className="text white text 2xl" /> <input type="file" accept="image/*" onChange={handleImageUpload} className="hidden" /> </label> </div> <div className="flex 1 text center md:text left"> {isEditing ? ( <form onSubmit={handleNameSubmit} className="flex items center gap 2"> <input type="text" value={userName} onChange={(e) => setUserName(e.target.value)} className="border rounded px 2 py 1" maxLength={30} /> <button type="submit" className="text blue 600 hover:text blue 700"> Save </button> </form> ) : ( <div className="flex items center justify center md:justify start gap 2"> <h1 className="text 2xl font bold">{userName}</h1> <button onClick={() => setIsEditing(true)} className="text gray 500 hover:text gray 700"> <FiEdit2 /> </button> </div> )} <p className="text gray 600 mt 1">john.doe@example.com</p> <div className="flex items center justify center md:justify start gap 6 mt 4"> <button onClick={() => setShowFollowersModal(true)} className="text gray 700 hover:text gray 900"> <span className="font bold">1.2K</span> Followers </button> <button onClick={() => setShowFollowersModal(true)} className="text gray 700 hover:text gray 900"> <span className="font bold">1K</span> Following </button> </div> </div> </div> <div className="flex flex wrap gap 4 mt 6"> <button onClick={() => setShowPasswordForm(!showPasswordForm)} className="flex 1 bg gray 100 text gray 700 py 2 px 4 rounded md hover:bg gray 200 transition duration 200" > Update Password </button> <button className="flex 1 bg red 100 text red 600 py 2 px 4 rounded md hover:bg red 200 transition duration 200 flex items center justify center gap 2"> <FiLogOut /> Logout </button> </div> {showPasswordForm && <PasswordUpdateForm />} </div> <div className="bg white rounded lg shadow overflow hidden"> <div className="flex border b"> <button onClick={() => setActiveTab("posts")} className={`flex 1 py 3 flex items center justify center gap 2 ${ activeTab === "posts" ? "border b 2 border blue 500 text blue 600" : "text gray 500" }`} > <BsGrid /> Posts </button> <button onClick={() => setActiveTab("reels")} className={`flex 1 py 3 flex items center justify center gap 2 ${ activeTab === "reels" ? "border b 2 border blue 500 text blue 600" : "text gray 500" }`} > <BsPlay /> Reels </button> </div> <div className="p 4"> {activeTab === "posts" ? ( <div className="grid grid cols 2 md:grid cols 3 gap 4"> {dummyPosts.map((post) => ( <div key={post.id} className="relative group"> <img src={post.image} alt="Post" className="w full h 48 object cover rounded md" /> <div className="absolute inset 0 bg black bg opacity 40 opacity 0 group hover:opacity 100 transition flex items center justify center rounded md"> <div className="flex items center text white"> <AiOutlineHeart className="mr 1" /> {post.likes} </div> </div> </div> ))} </div> ) : ( <div className="text center py 12 text gray 500"> <BsPlay className="text 4xl mx auto mb 4" /> <p>No reels available</p> </div> )} </div> </div> {showFollowersModal && <FollowersModal />} </div> ); }; export default UserAccount; without changing any context or adding new images