Search Tickets (final) - Copy this React, Tailwind Component to your project
thêm vào cuối trang một thanh điều hướng được fixed vào màn hình tương tự như đoạn code sau, lưu ý là chỉ thêm vào phần giao diện thôi ngoài ra không cần xử lý logic gì cả: <motion.div custom={{ y: 50 }} variants={itemVariants} className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-lg border-t border-green-100 px-6 py-4 shadow-lg" > <div className="flex justify-between items-center max-w-lg mx-auto"> <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={() => setActiveTab("booking")} className={`flex flex-col items-center ${activeTab === "booking" ? "text-blue-500" : "text-gray-400"}`} > <FaBus className="text-2xl mb-1" /> <span className="text-xs font-medium">Đặt vé</span> </motion.button> <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={() => setActiveTab("favorite")} className={`flex flex-col items-center ${activeTab === "favorite" ? "text-blue-500" : "text-gray-400"}`} > <FaHeart className="text-2xl mb-1" /> <span className="text-xs font-medium">Yêu thích</span> </motion.button> <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={() => setActiveTab("ticket")} className={`flex flex-col items-center ${activeTab === "ticket" ? "text-blue-500" : "text-gray-400"}`} > <FaTicketAlt className="text-2xl mb-1" /> <span className="text-xs font-medium">Vé của tôi</span> </motion.button> <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={() => setActiveTab("promotions")} className={`flex flex-col items-center ${activeTab === "promotions" ? "text-blue-500" : "text-gray-400"}`} > <FaTag className="text-2xl mb-1" /> <span className="text-xs font-medium">Ưu đãi</span> </motion.button> <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={() => setActiveTab("account")} className={`flex flex-col items-center ${activeTab === "account" ? "text-blue-500" : "text-gray-400"}`} > <FaUser className="text-2xl mb-1" /> <span className="text-xs font-medium">Tài khoản</span> </motion.button> </div> </motion.div>
