Order - Copy this React, Tailwind Component to your project
thiết lại phần ô nhập ngày đi như sau: khi người dùng nhấn vào ô nhập thì một modal hiện ra (modal này có thiết kế, màu sắc, animation tương tự như đoạn code sau: import React from "react"; import { motion } from "framer-motion"; import { FaExclamationCircle, FaMapMarker } from "react-icons/fa"; const RouteModal = ({ route, onClose }) => { const modalVariants = { hidden: { opacity: 0, y: 50 }, visible: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 50 }, }; return ( <div className="fixed inset-0 bg-black/15 backdrop-blur-sm flex items-center justify-center z-50"> <motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="bg-white/85 backdrop-blur-md rounded-3xl p-6 m-4 w-full max-w-md shadow-xl border border-white/20" > <h3 className="text-2xl font-bold mb-6 text-gray-800 bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-blue-600"> Lộ trình chi tiết </h3> <div className="space-y-6 relative"> {route.map((stop, index) => ( <div key={index} className="flex items-start space-x-4"> <div className="w-24 text-sm text-gray-600 pt-1">{stop.time}</div> <div className="relative flex flex-col items-center -my-2"> <FaMapMarker className="text-blue-500 z-10 bg-white" /> {index < route.length - 1 && ( <div className="h-full border-l-2 border-dashed border-gray-300 absolute top-4"></div> )} </div> <div className="flex-1"> <p className="text-gray-800 font-medium">{stop.location}</p> </div> </div> ))} </div> <div className="mt-8 p-4 bg-yellow-50 rounded-xl"> <p className="text-sm text-yellow-700"> <FaExclamationCircle className="inline-block mr-2" /> Lưu ý: Lịch trình chỉ là dự kiến và có thể thay đổi tùy vào tình hình giao thông. </p> </div> <button onClick={onClose} className="mt-6 w-full p-4 bg-gradient-to-r from-green-500 to-blue-500 text-white rounded-xl hover:opacity-90 transition-opacity duration-300 font-medium" > Đóng </button> </motion.div> </div> ); }; export default RouteModal; Thông tin của modal này là một lưới các ngày giống như tờ lịch để người dùng chọn
