function RoundedButtonDesign({ children, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "font-inter font-medium text-[#0E0F10] bg-[#E4E4E4] rounded-[8px] px-4 py-2 hover:bg-white transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function RoundedButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Button clicked'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Click me"), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Another button clicked'), __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Another button")); } function MainComponent() { const [selectedAnswer, setSelectedAnswer] = useState(null); const [showCorrectAnswer, setShowCorrectAnswer] = useState(false); const [score, setScore] = useState(5); const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); const [displayedQuestion, setDisplayedQuestion] = useState(""); const [showOptions, setShowOptions] = useState(false); const quizQuestions = [ { question: "WHAT IS THE CAPITAL OF FRANCE?", options: [ "PARIS", "LONDON", "TOKYO", "TEHRAN" ], correctAnswer: "PARIS" } ]; useEffect(()=>{ setDisplayedQuestion(""); setShowOptions(false); const question = quizQuestions[currentQuestionIndex].question; let index = 0; const typeQuestion = ()=>{ if (index < question.length) { setDisplayedQuestion((prev)=>prev + question[index]); index++; setTimeout(typeQuestion, 50); } else { setTimeout(()=>setShowOptions(true), 10); } }; typeQuestion(); }, [ currentQuestionIndex ]); const handleAnswerSelect = (answer)=>{ setSelectedAnswer(answer); if (answer !== quizQuestions[currentQuestionIndex].correctAnswer) { setShowCorrectAnswer(true); setTimeout(()=>{ setShowCorrectAnswer(false); setCurrentQuestionIndex((prev)=>(prev + 1) % quizQuestions.length); }, 2000); } else { setScore(score + 1); setCurrentQuestionIndex((prev)=>(prev + 1) % quizQuestions.length); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[rgba(247,246,247,0.40)] to-[rgba(247,226,226,0.68)] flex flex-col items-center p-8", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-poppins text-7xl font-bold mb-16", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "QUIZ"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-poppins text-xl mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "SCORE"), /*#__PURE__*/ React.createElement("div", { className: "inline-block bg-white rounded-lg border-2 border-[#FFE5E5] px-6 py-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-poppins text-3xl", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, score))), /*#__PURE__*/ React.createElement("h3", { className: "font-poppins text-xl text-center mb-8 min-h-[2rem]", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, displayedQuestion), /*#__PURE__*/ React.createElement("div", { className: `space-y-4 transition-opacity duration-500 ${showOptions ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, quizQuestions[currentQuestionIndex].options.map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>handleAnswerSelect(option), className: "w-full py-4 bg-white rounded-lg border-2 border-[#FFE5E5] font-poppins text-lg hover:bg-[#FFE5E5] transition-colors", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, option)))), showCorrectAnswer && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-poppins text-xl text-red-500", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Incorrect! The correct answer was:", " ", quizQuestions[currentQuestionIndex].correctAnswer)))); }