From 6031c81f5394acf315b277302a7fd18ea288b506 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 19 Aug 2024 04:40:08 +0900
Subject: refactor(frontend): extract UserIcon component

---
 .../GolfWatchApps/GolfWatchAppGaming.tsx           | 25 ++++++++--------------
 1 file changed, 9 insertions(+), 16 deletions(-)

(limited to 'frontend/app/components/GolfWatchApps')

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
index e8ac825..e325cf7 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx
@@ -3,6 +3,7 @@ import BorderedContainer from "../BorderedContainer";
 import CodeBlock from "../Gaming/CodeBlock";
 import ScoreBar from "../Gaming/ScoreBar";
 import SubmitResult from "../Gaming/SubmitResult";
+import UserIcon from "../UserIcon";
 
 type Props = {
 	gameDisplayName: string;
@@ -39,14 +40,10 @@ export default function GolfWatchAppGaming({
 				<div className="font-bold flex justify-between my-auto">
 					<div className="flex gap-4">
 						{playerInfoA.iconPath && (
-							<img
-								src={
-									process.env.NODE_ENV === "development"
-										? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfoA.iconPath}`
-										: `/iosdc-japan/2024/code-battle${playerInfoA.iconPath}`
-								}
-								alt={`${playerInfoA.displayName} のアイコン`}
-								className="w-12 h-12 rounded-full my-auto border-4 border-white"
+							<UserIcon
+								iconPath={playerInfoA.iconPath}
+								displayName={playerInfoA.displayName!}
+								className="w-12 h-12 my-auto"
 							/>
 						)}
 						<div>
@@ -68,14 +65,10 @@ export default function GolfWatchAppGaming({
 							<div className="text-2xl">{playerInfoB.displayName}</div>
 						</div>
 						{playerInfoB.iconPath && (
-							<img
-								src={
-									process.env.NODE_ENV === "development"
-										? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfoB.iconPath}`
-										: `/iosdc-japan/2024/code-battle${playerInfoB.iconPath}`
-								}
-								alt={`${playerInfoB.displayName} のアイコン`}
-								className="w-12 h-12 rounded-full my-auto border-4 border-white"
+							<UserIcon
+								iconPath={playerInfoB.iconPath}
+								displayName={playerInfoB.displayName!}
+								className="w-12 h-12 my-auto"
 							/>
 						)}
 					</div>
-- 
cgit v1.2.3-70-g09d2