From 0ab9bdf4ad937913dd3a29dbddf93f09b57deedd Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Fri, 21 Mar 2025 00:44:20 +0900
Subject: feat(frontend): make container foldable

---
 .../GolfWatchApps/GolfWatchAppGaming1v1.tsx          | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

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

diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
index 5b975e7..a647214 100644
--- a/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
+++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGaming1v1.tsx
@@ -5,7 +5,7 @@ import {
 	latestGameStatesAtom,
 } from "../../states/watch";
 import type { PlayerProfile } from "../../types/PlayerProfile";
-import BorderedContainer from "../BorderedContainer";
+import FoldableBorderedContainerWithCaption from "../FoldableBorderedContainerWithCaption";
 import CodeBlock from "../Gaming/CodeBlock";
 import LeftTime from "../Gaming/LeftTime";
 import ProblemColumn from "../Gaming/ProblemColumn";
@@ -109,12 +109,11 @@ export default function GolfWatchAppGaming1v1({
 			/>
 			<ThreeColumnLayout>
 				<TitledColumn title={<SubmitStatusLabel status={statusA} />}>
-					<BorderedContainer className="grow flex flex-col gap-4">
-						<div className="text-center font-semibold text-lg">
-							コードサイズ: {codeSizeA}
-						</div>
+					<FoldableBorderedContainerWithCaption
+						caption={`コードサイズ: ${codeSizeA}`}
+					>
 						<CodeBlock code={codeA} language="php" />
-					</BorderedContainer>
+					</FoldableBorderedContainerWithCaption>
 				</TitledColumn>
 				<ProblemColumn
 					title={problemTitle}
@@ -122,12 +121,11 @@ export default function GolfWatchAppGaming1v1({
 					sampleCode={sampleCode}
 				/>
 				<TitledColumn title={<SubmitStatusLabel status={statusB} />}>
-					<BorderedContainer className="grow flex flex-col gap-4">
-						<div className="text-center font-semibold text-lg">
-							コードサイズ: {codeSizeB}
-						</div>
+					<FoldableBorderedContainerWithCaption
+						caption={`コードサイズ: ${codeSizeB}`}
+					>
 						<CodeBlock code={codeB} language="php" />
-					</BorderedContainer>
+					</FoldableBorderedContainerWithCaption>
 				</TitledColumn>
 			</ThreeColumnLayout>
 		</div>
-- 
cgit v1.2.3-70-g09d2