Favourite - Copy this React, Tailwind Component to your project
sửa lại phần thông báo khi xóa thành công hay khi chưa nhấn vào nút xác nhận có thiết kế, animation giống hệt như thông báo khi nhấn vào nút trái tim của trang đầu tiên trong đoạn chat này vậy 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 tuy nhiên chỉ là thêm phần giao diện mới này vào thôi, phần code cũ vẫn giữ nguyên, ghi lại đầy đủ code cũ, nghiêm cấm comment// trong code: <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>
