46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import TrainLine from './TrainLine'
|
|
|
|
interface Route {
|
|
routeId: string
|
|
arrival_times: number[]
|
|
}
|
|
|
|
interface DirectionCardProps {
|
|
direction: 'North' | 'South'
|
|
routes: Route[]
|
|
isEndOfLine?: boolean
|
|
}
|
|
|
|
const DirectionCard = ({ direction, routes, isEndOfLine = false }: DirectionCardProps) => {
|
|
return (
|
|
<div className="bg-gray-800 overflow-hidden flex-1">
|
|
{!isEndOfLine && (
|
|
<div className="bg-gray-700 px-3 py-2 md:px-4 md:py-3 lg:px-6 lg:py-4">
|
|
<h2 className="text-xl md:text-2xl lg:text-3xl xl:text-4xl font-bold text-white">
|
|
{direction}
|
|
</h2>
|
|
</div>
|
|
)}
|
|
<div className="divide-y divide-gray-700">
|
|
{routes && routes.length > 0 ? (
|
|
routes.map((route, index) => (
|
|
<TrainLine
|
|
key={`${route.routeId}-${index}`}
|
|
routeId={route.routeId}
|
|
arrivalTimes={route.arrival_times}
|
|
/>
|
|
))
|
|
) : (
|
|
<div className="p-4 text-gray-400 text-center">
|
|
No trains available
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DirectionCard
|