Delivery Timeline Component

Import React, { useEffect, useState } from 'react'; const Home: React.FC = () => { // State to trigger animation const [animate, setAnimate] = useState(false); // Start animation when component mounts useEffect(() => { setAnimate(true); }, []); return ( <div className="flex justify center items center h screen bg gray 100"> <div className="bg white p 6 rounded lg shadow lg w 80"> {/* Timeline Steps */} <div className="relative"> {/* Ordered Step */} <div className="flex items center mb 6"> <div className={`w 5 h 5 rounded full ${ animate ? 'bg green 500' : 'bg gray 300' } transition colors duration 500`} ></div> <div className="ml 4"> <p className="font semibold">Ordered</p> <p className="text sm text gray 500">17 Oct, 2024</p> </div> </div> {/* Connecting line for Ordered */} <div className={`absolute left 2.5 top 5 w 0.5 ${ animate ? 'h 10 bg gray 300' : 'h 0' } transition all duration 1000 ease in out`} ></div> {/* Shipped Step */} <div className="flex items center mb 6"> <div className={`w 5 h 5 rounded full ${ animate ? 'bg gray 300' : 'bg gray 300' } transition colors duration 1000`} ></div> <div className="ml 4"> <p className="font semibold">Shipped</p> <p className="text sm text gray 500">17 Oct, 2024</p> </div> </div> {/* Connecting line for Shipped */} <div className={`absolute left 2.5 top 20 w 0.5 ${ animate ? 'h 10 bg gray 300' : 'h 0' } transition all duration [1200ms] ease in out`} ></div> {/* Out for Delivery Step */} <div className="flex items center mb 6"> <div className={`w 5 h 5 rounded full ${ animate ? 'bg gray 300' : 'bg gray 300' } transition colors duration 1500`} ></div> <div className="ml 4"> <p className="font semibold">Out For Delivery</p> <p className="text sm text gray 500">17 Oct, 2024</p> </div> </div> {/* Final Step: Estimated Delivery */} <div className="mt 4 text center"> <p>Estimated Delivery by</p> <p className="font semibold">20 Oct, 2024</p> </div> </div> </div> </div> ); }; export default Home; make this delivery time graphic