diff options
Diffstat (limited to 'frontend/app/components')
| -rw-r--r-- | frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx | 13 | ||||
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGaming.tsx | 25 | ||||
| -rw-r--r-- | frontend/app/components/UserIcon.tsx | 19 |
3 files changed, 33 insertions, 24 deletions
diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx index e9139ba..e6cb7e9 100644 --- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx +++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx @@ -4,6 +4,7 @@ import SubmitButton from "../../components/SubmitButton"; import type { PlayerInfo } from "../../models/PlayerInfo"; import BorderedContainer from "../BorderedContainer"; import SubmitResult from "../Gaming/SubmitResult"; +import UserIcon from "../UserIcon"; type Props = { gameDisplayName: string; @@ -60,14 +61,10 @@ export default function GolfPlayAppGaming({ <div className="text-2xl">{playerInfo.displayName}</div> </div> {playerInfo.iconPath && ( - <img - src={ - process.env.NODE_ENV === "development" - ? `http://localhost:8002/iosdc-japan/2024/code-battle${playerInfo.iconPath}` - : `/iosdc-japan/2024/code-battle${playerInfo.iconPath}` - } - alt={`${playerInfo.displayName} のアイコン`} - className="w-12 h-12 rounded-full my-auto border-4 border-white" + <UserIcon + iconPath={playerInfo.iconPath} + displayName={playerInfo.displayName!} + className="w-12 h-12 my-auto" /> )} </div> 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> diff --git a/frontend/app/components/UserIcon.tsx b/frontend/app/components/UserIcon.tsx new file mode 100644 index 0000000..656c170 --- /dev/null +++ b/frontend/app/components/UserIcon.tsx @@ -0,0 +1,19 @@ +type Props = { + iconPath: string; + displayName: string; + className: string; +}; + +export default function UserIcon({ iconPath, displayName, className }: Props) { + return ( + <img + src={ + process.env.NODE_ENV === "development" + ? `http://localhost:8002/iosdc-japan/2024/code-battle${iconPath}` + : `/iosdc-japan/2024/code-battle${iconPath}` + } + alt={`${displayName} のアイコン`} + className={`rounded-full border-4 border-white ${className}`} + /> + ); +} |