refactor(frontend): extract components for gaming page

1 files changed, 56 insertions, 0 deletions

diff --git a/frontend/app/components/Gaming/SubmitResult.tsx b/frontend/app/components/Gaming/SubmitResult.tsx
new file mode 100644
index 0000000..ae83e92
--- /dev/null
+++ b/frontend/app/components/Gaming/SubmitResult.tsx
@@ -0,0 +1,56 @@
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import type { SubmitResult } from "../../models/SubmitResult";
+import BorderedContainer from "../BorderedContainer";
+import SubmitStatusLabel from "../SubmitStatusLabel";
+import ExecStatusIndicatorIcon from "./ExecStatusIndicatorIcon";
+
+type Props = {
+	result: SubmitResult;
+	submitButton?: React.ReactNode;
+};
+
+export default function SubmitResult({ result, submitButton }: Props) {
+	return (
+		<div className="flex flex-col gap-2">
+			<div className="flex">
+				{submitButton}
+				<div className="grow font-bold text-xl text-center">
+					<SubmitStatusLabel status={result.status} />
+				</div>
+			</div>
+			<ul className="flex flex-col gap-2">
+				{result.execResults.map((r, idx) => (
+					<li key={r.testcase_id ?? -1} className="flex gap-2">
+						<div className="flex flex-col gap-2 p-2">
+							<div className="w-6">
+								<ExecStatusIndicatorIcon status={r.status} />
+							</div>
+							{idx !== result.execResults.length - 1 && (
+								<div>
+									<FontAwesomeIcon
+										icon={faArrowDown}
+										fixedWidth
+										className="text-gray-500"
+									/>
+								</div>
+							)}
+						</div>
+						<div className="grow p-2">
+							<BorderedContainer>
+								<div className="font-semibold">{r.label}</div>
+								<div>
+									<code>
+										{r.stdout}
+										{r.stderr}
+									</code>
+								</div>
+							</BorderedContainer>
+						</div>
+					</li>
+				))}
+			</ul>
+		</div>
+	);
+}