From 35d1be206c6be675d92839cfa209fceb5d1b6db9 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sat, 15 Mar 2025 21:10:51 +0900
Subject: feat(frontend): show sample code in watch page

---
 .../GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

(limited to 'frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx')

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
index 758c589..b382850 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx
@@ -1,7 +1,7 @@
 import { useAtomValue } from "jotai";
 import type { components } from "../../api/schema";
 import { gamingLeftTimeSecondsAtom } from "../../states/watch";
-import BorderedContainer from "../BorderedContainer";
+import Problem from "../Gaming/Problem";
 import UserLabel from "../UserLabel";
 
 type RankingEntry = components["schemas"]["RankingEntry"];
@@ -11,6 +11,7 @@ type Props = {
 	ranking: RankingEntry[];
 	problemTitle: string;
 	problemDescription: string;
+	sampleCode: string;
 	gameResult: "winA" | "winB" | "draw" | null;
 };
 
@@ -19,6 +20,7 @@ export default function GolfWatchAppGamingMultiplayer({
 	ranking,
 	problemTitle,
 	problemDescription,
+	sampleCode,
 	gameResult,
 }: Props) {
 	const leftTimeSeconds = useAtomValue(gamingLeftTimeSecondsAtom)!;
@@ -48,18 +50,11 @@ export default function GolfWatchAppGamingMultiplayer({
 				<div className="font-bold flex justify-between my-auto"></div>
 			</div>
 			<div className="grow grid grid-cols-2 p-4 gap-4">
-				<div className="flex flex-col gap-4">
-					<div>
-						<div className="mb-2 text-center text-xl font-bold">
-							{problemTitle}
-						</div>
-						<BorderedContainer>
-							<pre className="text-gray-700 whitespace-pre-wrap break-words">
-								{problemDescription}
-							</pre>
-						</BorderedContainer>
-					</div>
-				</div>
+				<Problem
+					title={problemTitle}
+					description={problemDescription}
+					sampleCode={sampleCode}
+				/>
 				<div>
 					<table className="min-w-full divide-y divide-gray-200">
 						<thead className="bg-gray-50">
-- 
cgit v1.2.3-70-g09d2