diff options
| author | nsfisis <nsfisis@gmail.com> | 2024-08-10 21:58:13 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2024-08-10 22:55:06 +0900 |
| commit | 04ff82d35e9cbd3d2a86204260f58a370fda88da (patch) | |
| tree | 3af529e1c4259d7cb8c5dbfa942de8e57bd75af1 /frontend/app | |
| parent | b4ab693aa438f3f1a335369568aabe7849fc1370 (diff) | |
| download | phperkaigi-2025-albatross-04ff82d35e9cbd3d2a86204260f58a370fda88da.tar.gz phperkaigi-2025-albatross-04ff82d35e9cbd3d2a86204260f58a370fda88da.tar.zst phperkaigi-2025-albatross-04ff82d35e9cbd3d2a86204260f58a370fda88da.zip | |
feat(frontend): show status indicator icon
Diffstat (limited to 'frontend/app')
| -rw-r--r-- | frontend/app/components/ExecStatusIndicatorIcon.tsx | 45 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx | 8 | ||||
| -rw-r--r-- | frontend/app/routes/_index.tsx | 4 |
3 files changed, 55 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} diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx index 2fcf1f2..25b9c81 100644 --- a/frontend/app/routes/_index.tsx +++ b/frontend/app/routes/_index.tsx @@ -1,7 +1,11 @@ +import { config } from "@fortawesome/fontawesome-svg-core"; import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; import { Link } from "@remix-run/react"; +import "@fortawesome/fontawesome-svg-core/styles.css"; import { ensureUserNotLoggedIn } from "../.server/auth"; +config.autoAddCss = false; + export const meta: MetaFunction = () => [ { title: "iOSDC Japan 2024 Albatross.swift" }, ]; |