Spaces:
Build error
Build error
| import React from 'react'; | |
| import { motion } from 'framer-motion'; | |
| import { Home, Search, Plus, MessageCircle, User } from 'lucide-react'; | |
| import { cn } from '../../lib/utils'; | |
| const navItems = [ | |
| { icon: Home, label: 'Home', id: 'home' }, | |
| { icon: Search, label: 'Search', id: 'search' }, | |
| { icon: Plus, label: 'Sell', id: 'sell', isMain: true }, | |
| { icon: MessageCircle, label: 'Chat', id: 'chat' }, | |
| { icon: User, label: 'Profile', id: 'profile' }, | |
| ]; | |
| const MobileNav = ({ activeView, onViewChange }) => { | |
| return ( | |
| <motion.div | |
| initial={{ y: 100 }} | |
| animate={{ y: 0 }} | |
| className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50" | |
| > | |
| <div className="glass-panel px-2 py-3 flex items-center gap-2 shadow-2xl shadow-black/50"> | |
| {navItems.map((item) => ( | |
| <button | |
| key={item.id} | |
| onClick={() => onViewChange(item.id)} | |
| className={cn( | |
| "relative flex flex-col items-center justify-center w-12 h-12 rounded-2xl transition-all duration-300", | |
| item.isMain | |
| ? "bg-white text-black -mt-6 shadow-[0_0_20px_rgba(255,255,255,0.3)]" | |
| : "text-white/60 hover:text-white hover:bg-white/5", | |
| activeView === item.id && !item.isMain && "text-white" | |
| )} | |
| > | |
| <item.icon size={item.isMain ? 24 : 20} strokeWidth={2} /> | |
| {activeView === item.id && !item.isMain && ( | |
| <motion.div | |
| layoutId="active-dot" | |
| className="absolute -bottom-1 w-1 h-1 bg-white rounded-full" | |
| /> | |
| )} | |
| </button> | |
| ))} | |
| </div> | |
| </motion.div> | |
| ); | |
| }; | |
| export default MobileNav; |