From facdf9357e576f6d47e7dd23f4f7b2b34f6a8d30 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Mon, 17 Mar 2025 22:19:18 +0900
Subject: commit files

---
 src/components/FuncMyAnswer.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/components/FuncMyAnswer.tsx

(limited to 'src/components/FuncMyAnswer.tsx')

diff --git a/src/components/FuncMyAnswer.tsx b/src/components/FuncMyAnswer.tsx
new file mode 100644
index 0000000..63cd427
--- /dev/null
+++ b/src/components/FuncMyAnswer.tsx
@@ -0,0 +1,32 @@
+import type { Quiz } from "../quiz";
+import React, { useState } from "react";
+import { useDebounce } from "use-debounce";
+
+type Props = {
+	quiz: Quiz;
+};
+
+const INITIAL_ANSWER = "your_answer";
+
+function FuncMyAnswer({ quiz }: Props) {
+	const [answer, setAnswer] = useState<string>(INITIAL_ANSWER);
+	const [debouncedAnswer] = useDebounce(answer, 500);
+	const hasAnyAnswer = debouncedAnswer !== INITIAL_ANSWER;
+	const isCorrectAnswer = debouncedAnswer === quiz.func;
+
+	const handleAnswerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setAnswer(e.target.value);
+	};
+
+	return (
+		<div>
+			この関数は？
+			<input type="text" value={answer} onChange={handleAnswerChange} />
+			<p>
+				{hasAnyAnswer && (isCorrectAnswer ? `正解！${quiz.message}` : "不正解")}
+			</p>
+		</div>
+	);
+}
+
+export default FuncMyAnswer;
-- 
cgit v1.2.3-70-g09d2