From 01b2981407b31235e564935f9613be8a6cd2b246 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Fri, 17 Apr 2026 02:30:16 +0300
Subject: [PATCH] Add TransferTime component for layover duration display

---
 .../TransferBar/TransferTime.test.tsx         | 23 +++++++++++++++++++
 .../components/TransferBar/TransferTime.tsx   | 18 +++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/features/online-board/components/TransferBar/TransferTime.test.tsx
 create mode 100644 src/features/online-board/components/TransferBar/TransferTime.tsx

diff --git a/src/features/online-board/components/TransferBar/TransferTime.test.tsx b/src/features/online-board/components/TransferBar/TransferTime.test.tsx
new file mode 100644
index 00000000..e1128f27
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/features/online-board/components/TransferBar/TransferTime.tsx b/src/features/online-board/components/TransferBar/TransferTime.tsx
new file mode 100644
index 00000000..ae7f6293
--- /dev/null
+++ b/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>
+  );
+};