commit files

1 files changed, 72 insertions, 0 deletions

diff --git a/src/components/App.tsx b/src/components/App.tsx
new file mode 100644
index 0000000..aa2a386
--- /dev/null
+++ b/src/components/App.tsx
@@ -0,0 +1,72 @@
+import type { QuizGroup } from "../quiz";
+import QuizGroupSection from "./QuizGroupSection";
+
+type Props = {
+	quizGroups: QuizGroup[];
+};
+
+function App({ quizGroups }: Props) {
+	return (
+		<table id="layout">
+			<tr>
+				<td id="header" colSpan={2} className="marquee">
+					<span>PHPerKaigi 2025 デジタルサーカス株式会社トークン問題</span>
+				</td>
+			</tr>
+			<tr>
+				<td id="sidebar">
+					<h2>メニュー</h2>
+					<ul>
+						<li>
+							<a href="">ホーム</a>
+						</li>
+						<li>
+							<a
+								href="https://github.com/nsfisis/PHPerKaigi2024-tokens"
+								target="_blank"
+							>
+								トークン問題2024
+							</a>
+						</li>
+						<li>
+							<a
+								href="https://github.com/nsfisis/PHPerKaigi2023-tokens"
+								target="_blank"
+							>
+								トークン問題2023
+							</a>
+						</li>
+						<li>
+							<a
+								href="https://github.com/nsfisis/PHPerKaigi2022-tokens"
+								target="_blank"
+							>
+								トークン問題2022
+							</a>
+						</li>
+						<li className="hidden">ここにトークンはないよ</li>
+					</ul>
+				</td>
+				<td id="content">
+					<main>
+						<p>
+							PHPerKaigi 2025 の PHPer チャレンジ企画において、
+							<a href="https://www.dgcircus.com/">デジタルサーカス株式会社</a>
+							から出題するトークン問題です (作問{" "}
+							<a href="https://x.com/nsfisis">@nsfisis</a>)。
+						</p>
+						<p>
+							それぞれの問題に、PHP の標準関数がひとつ設定されています。
+							好きな引数を渡すと実行されます。その実行結果を見て、何の関数かを当ててください。
+						</p>
+						{quizGroups.map((group) => (
+							<QuizGroupSection key={group.label} quizGroup={group} />
+						))}
+					</main>
+				</td>
+			</tr>
+		</table>
+	);
+}
+
+export default App;