feat(frontend): show status indicator icon

2 files changed, 51 insertions, 2 deletions

diff --git a/frontend/app/components/ExecStatusIndicatorIcon.tsx b/frontend/app/components/ExecStatusIndicatorIcon.tsx
new file mode 100644
index 0000000..a76e957
--- /dev/null
+++ b/frontend/app/components/ExecStatusIndicatorIcon.tsx
@@ -0,0 +1,45 @@
+import {
+	faBan,
+	faCircleCheck,
+	faCircleExclamation,
+	faRotate,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+	status: string;
+};
+
+export default function ExecStatusIndicatorIcon({ status }: Props) {
+	switch (status) {
+		case "running":
+			return (
+				<FontAwesomeIcon
+					icon={faRotate}
+					spin
+					fixedWidth
+					className="text-gray-700"
+				/>
+			);
+		case "success":
+			return (
+				<FontAwesomeIcon
+					icon={faCircleCheck}
+					fixedWidth
+					className="text-green-500"
+				/>
+			);
+		case "canceled":
+			return (
+				<FontAwesomeIcon icon={faBan} fixedWidth className="text-gray-400" />
+			);
+		default:
+			return (
+				<FontAwesomeIcon
+					icon={faCircleExclamation}
+					fixedWidth
+					className="text-red-500"
+				/>
+			);
+	}
+}
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index 992ce7a..53d5bce 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -1,3 +1,5 @@
+import ExecStatusIndicatorIcon from "../ExecStatusIndicatorIcon";
+
 type Props = {
 	problem: string;
 	playerInfoA: PlayerInfo;
@@ -128,7 +130,8 @@ export default function GolfWatchAppGaming({
 									<li key={idx}>
 										<div>
 											<div>
-												{result.status} {result.label}
+												<ExecStatusIndicatorIcon status={result.status} />{" "}
+												{result.label}
 											</div>
 											<div>
 												{result.stdout}
@@ -160,7 +163,8 @@ export default function GolfWatchAppGaming({
 									<li key={idx}>
 										<div>
 											<div>
-												{result.status} {result.label}
+												<ExecStatusIndicatorIcon status={result.status} />{" "}
+												{result.label}
 											</div>
 											<div>
 												{result.stdout}