Search Tickets (final) - Copy this React, Tailwind Component to your project
Thêm vào cuối trang một thanh điều hóa được fixed vào màn hình tương tự như đoạn code sau: <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>
