feat(frontend): add InlineCode component

2 files changed, 15 insertions, 4 deletions

diff --git a/frontend/app/components/Gaming/InlineCode.tsx b/frontend/app/components/Gaming/InlineCode.tsx
new file mode 100644
index 0000000..c90cad4
--- /dev/null
+++ b/frontend/app/components/Gaming/InlineCode.tsx
@@ -0,0 +1,11 @@
+type Props = {
+	code: string;
+};
+
+export default function InlineCode({ code }: Props) {
+	return (
+		<code className="bg-gray-50 rounded-lg border border-gray-300 p-1">
+			{code}
+		</code>
+	);
+}
diff --git a/frontend/app/components/Gaming/Problem.tsx b/frontend/app/components/Gaming/Problem.tsx
index 0f7d26f..8a8613f 100644
--- a/frontend/app/components/Gaming/Problem.tsx
+++ b/frontend/app/components/Gaming/Problem.tsx
@@ -1,5 +1,6 @@
 import BorderedContainerWithCaption from "../BorderedContainerWithCaption";
 import CodeBlock from "./CodeBlock";
+import InlineCode from "./InlineCode";
 
 type Props = {
 	title: string;
@@ -35,10 +36,9 @@ export default function Problem({ title, description, sampleCode }: Props) {
 						等で実行が中断された場合は失敗扱いとなります。
 					</p>
 					<p>
-						なお、<code>error_reporting</code> は{" "}
-						<code>
-							E_ALL &amp; ~E_WARNING &amp; ~E_NOTICE &amp; ~E_DEPRECATED
-						</code>{" "}
+						なお、
+						<InlineCode code="error_reporting" /> は{" "}
+						<InlineCode code="E_ALL &amp; ~E_WARNING &amp; ~E_NOTICE &amp; ~E_DEPRECATED" />{" "}
 						に設定されています。
 					</p>
 				</div>