feat(frontend): make container foldable

3 files changed, 61 insertions, 18 deletions

diff --git a/frontend/app/components/FoldableBorderedContainerWithCaption.tsx b/frontend/app/components/FoldableBorderedContainerWithCaption.tsx
new file mode 100644
index 0000000..2d21b61
--- /dev/null
+++ b/frontend/app/components/FoldableBorderedContainerWithCaption.tsx
@@ -0,0 +1,45 @@
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState } from "react";
+import BorderedContainer from "./BorderedContainer";
+
+type Props = {
+	caption: string;
+	children: React.ReactNode;
+};
+
+export default function FoldableBorderedContainerWithCaption({
+	caption,
+	children,
+}: Props) {
+	const [isOpen, setIsOpen] = useState(true);
+
+	const handleToggle = () => {
+		setIsOpen((prev) => !prev);
+	};
+
+	return (
+		<BorderedContainer>
+			<div className="flex flex-col gap-4">
+				<div className="flex items-center">
+					<div className="flex-1 text-center">
+						<h2 className="text-lg font-semibold">{caption}</h2>
+					</div>
+					<div className="flex-shrink-0">
+						<button
+							onClick={handleToggle}
+							className="p-1 bg-gray-50 border-1 border-gray-300 rounded-sm"
+						>
+							<FontAwesomeIcon
+								icon={isOpen ? faChevronUp : faChevronDown}
+								fixedWidth
+								className="text-gray-500"
+							/>
+						</button>
+					</div>
+				</div>
+				<div className={isOpen ? "" : "hidden"}>{children}</div>
+			</div>
+		</BorderedContainer>
+	);
+}
diff --git a/frontend/app/components/Gaming/ProblemColumn.tsx b/frontend/app/components/Gaming/ProblemColumn.tsx
index 2a57afd..922cbe7 100644
--- a/frontend/app/components/Gaming/ProblemColumn.tsx
+++ b/frontend/app/components/Gaming/ProblemColumn.tsx
@@ -1,4 +1,4 @@
-import BorderedContainerWithCaption from "../BorderedContainerWithCaption";
+import FoldableBorderedContainerWithCaption from "../FoldableBorderedContainerWithCaption";
 import TitledColumn from "../TitledColumn";
 import CodeBlock from "./CodeBlock";
 import InlineCode from "./InlineCode";
@@ -16,15 +16,15 @@ export default function ProblemColumn({
 }: Props) {
 	return (
 		<TitledColumn title={title}>
-			<BorderedContainerWithCaption caption="問題">
+			<FoldableBorderedContainerWithCaption caption="問題">
 				<pre className="text-gray-700 whitespace-pre-wrap break-words">
 					{description}
 				</pre>
-			</BorderedContainerWithCaption>
-			<BorderedContainerWithCaption caption="サンプルコード">
+			</FoldableBorderedContainerWithCaption>
+			<FoldableBorderedContainerWithCaption caption="サンプルコード">
 				<CodeBlock code={sampleCode} language="php" />
-			</BorderedContainerWithCaption>
-			<BorderedContainerWithCaption caption="スコア計算・PHP 環境">
+			</FoldableBorderedContainerWithCaption>
+			<FoldableBorderedContainerWithCaption caption="スコア計算・PHP 環境">
 				<div className="text-gray-700 flex flex-col gap-2">
 					<p>
 						スコアはコード中の全 ASCII
@@ -54,7 +54,7 @@ export default function ProblemColumn({
 						に設定されています。
 					</p>
 				</div>
-			</BorderedContainerWithCaption>
+			</FoldableBorderedContainerWithCaption>
 		</TitledColumn>
 	);
 }
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>