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

---
 frontend/app/components/Gaming/Problem.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 frontend/app/components/Gaming/Problem.tsx

(limited to 'frontend/app/components/Gaming/Problem.tsx')

diff --git a/frontend/app/components/Gaming/Problem.tsx b/frontend/app/components/Gaming/Problem.tsx
new file mode 100644
index 0000000..1584a5a
--- /dev/null
+++ b/frontend/app/components/Gaming/Problem.tsx
@@ -0,0 +1,24 @@
+import BorderedContainerWithCaption from "../BorderedContainerWithCaption";
+import CodeBlock from "./CodeBlock";
+
+type Props = {
+	title: string;
+	description: string;
+	sampleCode: string;
+};
+
+export default function Problem({ title, description, sampleCode }: Props) {
+	return (
+		<div className="p-4 flex flex-col gap-4">
+			<div className="text-center text-xl font-bold">{title}</div>
+			<BorderedContainerWithCaption caption="問題">
+				<pre className="text-gray-700 whitespace-pre-wrap break-words">
+					{description}
+				</pre>
+			</BorderedContainerWithCaption>
+			<BorderedContainerWithCaption caption="サンプルコード">
+				<CodeBlock code={sampleCode} language="php" />
+			</BorderedContainerWithCaption>
+		</div>
+	);
+}
-- 
cgit v1.2.3-70-g09d2