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

Import React from 'react'; import { Settings, Clock, CreditCard, HelpCircle, Share2, Layers, Camera, Tool, User, ChevronRight, Plus, Signal, Battery, Wifi } from 'lucide react'; // Status Bar Component const StatusBar = () => ( <div className="bg gray 50 px 4 py 2 flex justify between items center text black"> <span className="text sm font medium">12:57</span> <div className="flex items center gap 2"> <Signal size={16} /> <Wifi size={16} /> <Battery size={16} /> </div> </div> ); // Header Component const Header = () => ( <div className="px 4 py 3 flex justify between items center border b border gray 100"> <h1 className="text 2xl font semibold">Account</h1> <div className="flex items center gap 1"> <span className="text sm">English</span> <ChevronRight size={16} className="text gray 400" /> </div> </div> ); // Profile Section Component const ProfileSection = () => ( <div className="px 4 py 3 flex items center gap 4 border b border gray 100"> <div className="relative"> <div className="w 14 h 14 bg gray 100 rounded full flex items center justify center"> <span className="text gray 400 text xl">G</span> </div> <div className="absolute bottom 0 right 0 w 6 h 6 bg white rounded full flex items center justify center border border gray 200"> <Plus size={16} className="text gray 400" /> </div> </div> <div className="flex grow"> <h2 className="text lg font normal text gray 900">Enter your Name</h2> <p className="text sm text gray 500">aahana.nath@gmail.com</p> </div> <ChevronRight size={20} className="text gray 400" /> </div> ); // Pro Touch Section Component const ProTouchSection = () => ( <div className="mx 4 my 3 p 4 bg purple 50 rounded xl"> <div className="flex justify between items center"> <div> <div className="flex items center gap 2"> <span className="font medium text gray 900">Send for Pro Touch</span> <HelpCircle size={16} className="text gray 400" /> </div> <div className="mt 2"> <span className="text xl font semibold">0</span> <span className="text gray 600 ml 2">Credits</span> </div> </div> <button className="bg purple 600 hover:bg purple 700 text white px 6 py 2.5 rounded full font medium text sm"> Buy Credits </button> </div> </div> ); // Menu Item Component const MenuItem = ({ icon, label }) => ( <div className="px 4 py 4 flex items center border b border gray 100"> <span className="text gray 600">{icon}</span> <span className="ml 4 flex grow text gray 900">{label}</span> <ChevronRight size={20} className="text gray 400" /> </div> ); // Footer Links Component const FooterLinks = () => ( <div className="px 4 py 3"> <div className="text gray 600 py 2">About Us</div> <div className="text gray 600 py 2">Privacy Policy</div> </div> ); // Bottom Navigation Item Component const BottomNavItem = ({ icon, label, isNew, isActive }) => ( <div className="flex flex col items center gap 1"> <div className="relative"> {icon} {isNew && ( <span className="absolute top 1 right 1 bg pink 500 text white text xs px 1.5 py 0.5 rounded full text [10px]"> New </span> )} </div> <span className="text [10px]">{label}</span> </div> ); // Bottom Navigation Component const BottomNavigation = () => ( <div className="fixed bottom 0 left 0 right 0 bg white border t border gray 200"> <div className="max w md mx auto px 6 py 2 flex justify between items center"> <BottomNavItem icon={<Layers size={24} />} label="My Projects" /> <BottomNavItem icon={<div className="text xs">AI<br/>Backgrounds</div>} label="" /> <BottomNavItem icon={<Camera size={24} />} label="Camera" isNew={true} /> <BottomNavItem icon={<Tool size={24} />} label="Tools" /> <BottomNavItem icon={<User size={24} className="text purple 600" />} label="Account" isActive={true} /> </div> <div className="h 2 bg black w 32 mx auto rounded full my 2" /> </div> ); // Main Account Page Component const AccountPage = () => { const menuItems = [ { icon: <Settings size={20} />, label: 'Account Settings' }, { icon: <Clock size={20} />, label: 'Project History' }, { icon: <CreditCard size={20} />, label: 'Payment History' }, { icon: <HelpCircle size={20} />, label: 'Need Help' }, { icon: <Share2 size={20} />, label: 'Refer and Earn' }, ]; return ( <div className="max w md mx auto bg white min h screen relative pb 24"> <StatusBar /> <Header /> <ProfileSection /> <ProTouchSection /> <div className="divide y divide gray 100"> {menuItems.map((item, index) => ( <MenuItem key={index} icon={item.icon} label={item.label} /> ))} </div> <FooterLinks /> <BottomNavigation /> </div> ); }; export default AccountPage;