refactor(frontend): TwoColumnLayout/ThreeColumnLayout

5 files changed, 36 insertions, 7 deletions

diff --git a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
index 69da5d9..b1b6f80 100644
--- a/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
+++ b/frontend/app/components/GolfPlayApps/GolfPlayAppGaming.tsx
@@ -1,7 +1,6 @@
 import { useAtomValue } from "jotai";
 import React, { useRef, useState } from "react";
 import { Link } from "react-router";
-import SubmitButton from "../../components/SubmitButton";
 import {
 	gamingLeftTimeSecondsAtom,
 	scoreAtom,
@@ -11,7 +10,9 @@ import type { PlayerProfile } from "../../types/PlayerProfile";
 import BorderedContainer from "../BorderedContainer";
 import LeftTime from "../Gaming/LeftTime";
 import Problem from "../Gaming/Problem";
+import SubmitButton from "../SubmitButton";
 import SubmitStatusLabel from "../SubmitStatusLabel";
+import ThreeColumnLayout from "../ThreeColumnLayout";
 import UserIcon from "../UserIcon";
 
 function calcCodeSize(code: string): number {
@@ -87,7 +88,7 @@ export default function GolfPlayAppGaming({
 					</div>
 				</Link>
 			</div>
-			<div className="grow grid grid-cols-3 divide-x divide-gray-300">
+			<ThreeColumnLayout>
 				<Problem
 					title={problemTitle}
 					description={problemDescription}
@@ -142,7 +143,7 @@ export default function GolfPlayAppGaming({
 						過去の提出結果を閲覧する機能は現在実装中です。それまでは提出コードをお手元に保管しておいてください。
 					</p>
 				</div>
-			</div>
+			</ThreeColumnLayout>
 		</div>
 	);
 }
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index 8e2b565..081212e 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -9,6 +9,7 @@ import LeftTime from "../Gaming/LeftTime";
 import Problem from "../Gaming/Problem";
 import ScoreBar from "../Gaming/ScoreBar";
 import SubmitResult from "../Gaming/SubmitResult";
+import ThreeColumnLayout from "../ThreeColumnLayout";
 import UserIcon from "../UserIcon";
 
 type Props = {
@@ -106,7 +107,7 @@ export default function GolfWatchAppGaming1v1({
 				bgA="bg-orange-400"
 				bgB="bg-purple-400"
 			/>
-			<div className="grow grid grid-cols-3 p-4 gap-4">
+			<ThreeColumnLayout>
 				<CodeBlock code={codeA} language="php" />
 				<div className="flex flex-col gap-4">
 					<div className="grid grid-cols-2 gap-4">
@@ -120,7 +121,7 @@ export default function GolfWatchAppGaming1v1({
 					/>
 				</div>
 				<CodeBlock code={codeB} language="php" />
-			</div>
+			</ThreeColumnLayout>
 		</div>
 	);
 }
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
index f3a377b..06a2376 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
@@ -4,6 +4,7 @@ import { gamingLeftTimeSecondsAtom } from "../../states/watch";
 import LeftTime from "../Gaming/LeftTime";
 import Problem from "../Gaming/Problem";
 import RankingTable from "../Gaming/RankingTable";
+import TwoColumnLayout from "../TwoColumnLayout";
 
 type RankingEntry = components["schemas"]["RankingEntry"];
 
@@ -34,7 +35,7 @@ export default function GolfWatchAppGamingMultiplayer({
 				</div>
 				<div className="font-bold flex justify-between my-auto"></div>
 			</div>
-			<div className="grow grid grid-cols-2 p-4 gap-4">
+			<TwoColumnLayout>
 				<Problem
 					title={problemTitle}
 					description={problemDescription}
@@ -44,7 +45,7 @@ export default function GolfWatchAppGamingMultiplayer({
 					<div className="text-center text-xl font-bold">順位表</div>
 					<RankingTable ranking={ranking} />
 				</div>
-			</div>
+			</TwoColumnLayout>
 		</div>
 	);
 }
diff --git a/frontend/app/components/ThreeColumnLayout.tsx b/frontend/app/components/ThreeColumnLayout.tsx
new file mode 100644
index 0000000..42533b7
--- /dev/null
+++ b/frontend/app/components/ThreeColumnLayout.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+export default function ThreeColumnLayout({ children }: Props) {
+	return (
+		<div className="grow grid grid-cols-3 divide-x divide-gray-300">
+			{children}
+		</div>
+	);
+}
diff --git a/frontend/app/components/TwoColumnLayout.tsx b/frontend/app/components/TwoColumnLayout.tsx
new file mode 100644
index 0000000..980bf4d
--- /dev/null
+++ b/frontend/app/components/TwoColumnLayout.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+type Props = {
+	children: React.ReactNode;
+};
+
+export default function TwoColumnLayout({ children }: Props) {
+	return (
+		<div className="grow grid grid-cols-2 divide-x divide-gray-300">
+			{children}
+		</div>
+	);
+}