The time follow the `hh:mm` format (ie 23:59), while the duration uses the `h` of hour or the `m` of minute as separator (ie 1h13 or 6m). To Minimize the room for confusion, it is recommended to always use 24h format in duration, and to always pad the hour with 0 if needed: Do NOT: 3:45, instead DO: 03:45. To further minimize confusion, spacing can be added to the duration: 3h 45m, instead do: 3h45m. This increases the visual distinction between duration and instant representation.

The ItineraryTimeOverview component displays a summary of trip timetable (Start -> Duration -> End ).

The LegOverview component displays a summary of a leg in a trip plan. The LegOverview component tries to display as much relevant information as is made possible by the available space. Try resizing the window to see the effect when space becomes scarce

The ItineraryOverview component displays a summary of a leg in a trip plan. The ItineraryOverview component renders the size of each LegOverview proportionally to their duration.

The LegDetail component displays a detailed view of a leg in a trip plan. When you put all the LegDetail components together, you get a complete trip plan ui.