refactor(frontend): extract UserIcon component

4 files changed, 50 insertions, 46 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}`}
+		/>
+	);
+}
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index 7aa77fd..3a50757 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -4,6 +4,7 @@ import { apiGetGames } from "../.server/api/client";
 import { ensureUserLoggedIn } from "../.server/auth";
 import BorderedContainer from "../components/BorderedContainer";
 import NavigateLink from "../components/NavigateLink";
+import UserIcon from "../components/UserIcon";
 
 export const meta: MetaFunction = () => [
 	{ title: "Dashboard | iOSDC Japan 2024 Albatross.swift" },
@@ -22,23 +23,19 @@ export default function Dashboard() {
 	const { user, games } = useLoaderData<typeof loader>()!;
 
 	return (
-		<div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center">
+		<div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center gap-4">
 			{user.icon_path && (
-				<img
-					src={
-						process.env.NODE_ENV === "development"
-							? `http://localhost:8002/iosdc-japan/2024/code-battle${user.icon_path}`
-							: `/iosdc-japan/2024/code-battle${user.icon_path}`
-					}
-					alt={`${user.display_name} のアイコン`}
-					className="w-24 h-24 rounded-full mb-4"
+				<UserIcon
+					iconPath={user.icon_path}
+					displayName={user.display_name}
+					className="w-24 h-24"
 				/>
 			)}
-			<h1 className="text-2xl font-bold mb-4">
+			<h1 className="text-2xl font-bold">
 				<span className="text-gray-800">{user.display_name}</span>
 				<span className="text-gray-500 ml-2">@{user.username}</span>
 			</h1>
-			<h2 className="text-xl font-semibold mb-4 text-gray-700">試合</h2>
+			<h2 className="text-xl font-semibold text-gray-700">試合</h2>
 			<BorderedContainer>
 				<div className="px-4">
 					{games.length === 0 ? (
@@ -77,16 +74,14 @@ export default function Dashboard() {
 					)}
 				</div>
 			</BorderedContainer>
-			<div className="mt-6">
-				<Form method="post" action="/logout">
-					<button
-						type="submit"
-						className="px-4 py-2 bg-red-500 text-white rounded transition duration-300 hover:bg-red-700 focus:ring focus:ring-red-400 focus:outline-none"
-					>
-						ログアウト
-					</button>
-				</Form>
-			</div>
+			<Form method="post" action="/logout">
+				<button
+					type="submit"
+					className="px-4 py-2 bg-red-500 text-white rounded transition duration-300 hover:bg-red-700 focus:ring focus:ring-red-400 focus:outline-none"
+				>
+					ログアウト
+				</button>
+			</Form>
 			{user.is_admin && (
 				<a
 					href={
@@ -94,7 +89,7 @@ export default function Dashboard() {
 							? "http://localhost:8002/iosdc-japan/2024/code-battle/admin/dashboard"
 							: "/iosdc-japan/2024/code-battle/admin/dashboard"
 					}
-					className="mt-4 text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500 focus:ring focus:ring-pink-400 focus:outline-none"
+					className="text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500 focus:ring focus:ring-pink-400 focus:outline-none"
 				>
 					Admin Dashboard
 				</a>