Add TransferTime component for layover duration display

src/features/online-board/components/TransferBar/TransferTime.test.tsx

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TransferTime } from "./TransferTime.js";
+
+describe("TransferTime", () => {
+  it("renders '1h 30m' for valid inputs", () => {
+    render(<TransferTime arrivalUtc="2026-04-17T10:00:00Z" departureUtc="2026-04-17T11:30:00Z" />);
+    expect(screen.getByText("1h 30m")).toBeTruthy();
+  });
+
+  it("returns null when arrivalUtc is empty string", () => {
+    const { container } = render(<TransferTime arrivalUtc="" departureUtc="2026-04-17T11:30:00Z" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("returns null when departure is before arrival", () => {
+    const { container } = render(
+      <TransferTime arrivalUtc="2026-04-17T12:00:00Z" departureUtc="2026-04-17T11:00:00Z" />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});

src/features/online-board/components/TransferBar/TransferTime.tsx

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+import { computeTransferMinutes, formatMinutesAsDuration } from "./computeTransferTime.js";
+
+export interface TransferTimeProps {
+  arrivalUtc: string;
+  departureUtc: string;
+}
+
+export const TransferTime: FC<TransferTimeProps> = ({ arrivalUtc, departureUtc }) => {
+  const minutes = computeTransferMinutes(arrivalUtc, departureUtc);
+  if (minutes === null) return null;
+
+  return (
+    <span className="transfer-time" data-testid="transfer-time">
+      {formatMinutesAsDuration(minutes)}
+    </span>
+  );
+};