1 files changed, 32 insertions, 0 deletions
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;