feat(frontend): show sample code in watch page

1 files changed, 24 insertions, 0 deletions

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