feat: rework to use next and host from single dockerfile

mta-sign-ui/components/trains/DirectionCard.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import TrainLine from './TrainLine'
+
+interface Route {
+    routeId: string
+    arrival_times: number[]
+}
+
+interface DirectionCardProps {
+    direction: 'North' | 'South'
+    routes: Route[]
+}
+
+const DirectionCard = ({ direction, routes }: DirectionCardProps) => {
+    return (
+        <div className="bg-gray-800 overflow-hidden flex-1">
+            <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