refactor(frontend): TwoColumnLayout/ThreeColumnLayout

2 files changed, 6 insertions, 4 deletions

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>
 	);
 }