Update components/MathQuizApp.tsx

components/MathQuizApp.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { useState } from 'react';
-import { Check, X } from 'lucide-react';
+import { Check, X, Calculator } from 'lucide-react';
 
+// Import all the calculator hooks and logic from the first component
 const operations = ['+', '-', '*', '/'];
 const difficulties = ['easy', 'medium', 'hard'];
 
-const generateQuestion = (difficulty: string) => {
+const generateQuestion = (difficulty) => {
   const operation = operations[Math.floor(Math.random() * operations.length)];
   let num1 = 0;
   let num2 = 0;
@@ -34,6 +35,103 @@ const generateQuestion = (difficulty: string) => {
   };
 };
 
+const CalculatorComponent = ({ onClose }) => {
+  const [display, setDisplay] = useState('0');
+  const [memory, setMemory] = useState(null);
+  const [firstOperand, setFirstOperand] = useState(null);
+  const [operator, setOperator] = useState(null);
+  const [waitingForSecondOperand, setWaitingForSecondOperand] = useState(false);
+
+  const inputDigit = (digit) => {
+    if (waitingForSecondOperand) {
+      setDisplay(digit);
+      setWaitingForSecondOperand(false);
+    } else {
+      setDisplay(display === '0' ? digit : display + digit);
+    }
+  };
+
+  const inputDecimal = () => {
+    if (waitingForSecondOperand) {
+      setDisplay('0.');
+      setWaitingForSecondOperand(false);
+      return;
+    }
+    if (!display.includes('.')) {
+      setDisplay(display + '.');
+    }
+  };
+
+  const clear = () => {
+    setDisplay('0');
+    setFirstOperand(null);
+    setOperator(null);
+    setWaitingForSecondOperand(false);
+  };
+
+  const calculate = (firstOp, secondOp, op) => {
+    switch (op) {
+      case '+': return firstOp + secondOp;
+      case '-': return firstOp - secondOp;
+      case '*': return firstOp * secondOp;
+      case '/': return firstOp / secondOp;
+      default: return secondOp;
+    }
+  };
+
+  const performOperation = (nextOperator) => {
+    const inputValue = parseFloat(display);
+    
+    if (firstOperand === null) {
+      setFirstOperand(inputValue);
+    } else if (operator) {
+      const result = calculate(firstOperand, inputValue, operator);
+      setDisplay(String(result));
+      setFirstOperand(result);
+    }
+    
+    setWaitingForSecondOperand(true);
+    setOperator(nextOperator);
+  };
+
+  return (
+    <div className="bg-gray-100 p-4 rounded-lg shadow-lg w-full max-w-md">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-bold">Calculator</h2>
+        <button onClick={onClose} className="text-gray-600 hover:text-gray-800">
+          <X className="w-6 h-6" />
+        </button>
+      </div>
+      <div className="bg-gray-200 p-4 rounded mb-4 text-right text-2xl font-bold">
+        {display}
+      </div>
+      <div className="grid grid-cols-4 gap-2">
+        <button onClick={clear} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">C</button>
+        <button onClick={() => performOperation('/')} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">/</button>
+        <button onClick={() => performOperation('*')} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">*</button>
+        <button onClick={() => performOperation('-')} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">-</button>
+        
+        <button onClick={() => inputDigit('7')} className="p-3 bg-white hover:bg-gray-100 rounded">7</button>
+        <button onClick={() => inputDigit('8')} className="p-3 bg-white hover:bg-gray-100 rounded">8</button>
+        <button onClick={() => inputDigit('9')} className="p-3 bg-white hover:bg-gray-100 rounded">9</button>
+        <button onClick={() => performOperation('+')} className="p-3 bg-gray-300 hover:bg-gray-400 rounded">+</button>
+        
+        <button onClick={() => inputDigit('4')} className="p-3 bg-white hover:bg-gray-100 rounded">4</button>
+        <button onClick={() => inputDigit('5')} className="p-3 bg-white hover:bg-gray-100 rounded">5</button>
+        <button onClick={() => inputDigit('6')} className="p-3 bg-white hover:bg-gray-100 rounded">6</button>
+        <button onClick={() => performOperation('=')} className="p-3 bg-blue-500 hover:bg-blue-600 text-white rounded row-span-2">=</button>
+        
+        <button onClick={() => inputDigit('1')} className="p-3 bg-white hover:bg-gray-100 rounded">1</button>
+        <button onClick={() => inputDigit('2')} className="p-3 bg-white hover:bg-gray-100 rounded">2</button>
+        <button onClick={() => inputDigit('3')} className="p-3 bg-white hover:bg-gray-100 rounded">3</button>
+        
+        <button onClick={() => inputDigit('0')} className="p-3 bg-white hover:bg-gray-100 rounded col-span-2">0</button>
+        <button onClick={inputDecimal} className="p-3 bg-white hover:bg-gray-100 rounded">.</button>
+      </div>
+    </div>
+  );
+};
+
 const MathQuizApp = () => {
   const [question, setQuestion] = useState(generateQuestion('easy'));
   const [userAnswer, setUserAnswer] = useState('');
@@ -41,8 +139,9 @@ const MathQuizApp = () => {
   const [score, setScore] = useState(0);
   const [wrongAnswers, setWrongAnswers] = useState(0);
   const [difficulty, setDifficulty] = useState('easy');
+  const [showCalculator, setShowCalculator] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e) => {
     e.preventDefault();
     if (Number(userAnswer) === question.answer) {
       setResult('Correct!');
@@ -55,7 +154,7 @@ const MathQuizApp = () => {
     setQuestion(generateQuestion(difficulty));
   };
 
-  const handleDifficultyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleDifficultyChange = (e) => {
     setDifficulty(e.target.value);
     setQuestion(generateQuestion(e.target.value));
     setScore(0);
@@ -63,64 +162,84 @@ const MathQuizApp = () => {
   };
 
   return (
-    <div className="bg-gray-50 min-h-screen flex items-center justify-center">
-      <div className="max-w-4xl mx-auto p-10 bg-white rounded-lg shadow-md mt-4">
-        <h1 className="text-4xl font-bold mb-8 text-center">Math Quiz App</h1>
-        <form onSubmit={handleSubmit} className="space-y-6">
-          <div className="flex flex-col items-center gap-6">
-            <div className="flex gap-8 items-center justify-center">
-              <div className="text-xl font-bold">Correct: {score}</div>
-              <div className="text-xl font-bold text-red-500">Wrong: {wrongAnswers}</div>
-            </div>
-            <select
-              value={difficulty}
-              onChange={handleDifficultyChange}
-              className="bg-gray-50 border border-gray-300 text-gray-900 text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 w-48 text-center"
-            >
-              {difficulties.map((difficulty) => (
-                <option key={difficulty} value={difficulty}>
-                  {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
-                </option>
-              ))}
-            </select>
-          </div>
-          <div className="text-center mt-8">
-            <p className="text-3xl font-bold mb-6">
-              What is {question.num1} {question.operation} {question.num2}?
-            </p>
-            <input
-              type="number"
-              value={userAnswer}
-              onChange={(e) => setUserAnswer(e.target.value)}
-              className="bg-gray-50 border border-gray-300 text-gray-900 text-xl rounded-lg focus:ring-blue-500 focus:border-blue-500 p-4 w-80 text-center"
-            />
-          </div>
-          <div className="text-center">
-            <button
-              type="submit"
-              className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-lg px-8 py-3 text-center"
-            >
-              Submit
-            </button>
-          </div>
-          {result && (
-            <p
-              className={`text-xl font-bold text-center ${
-                result === 'Correct!' ? 'text-green-500' : 'text-red-500'
-              }`}
-            >
-              {result}{' '}
-              {result === 'Correct!' ? (
-                <Check className="inline-block w-6 h-6" />
-              ) : (
-                <X className="inline-block w-6 h-6" />
+    <div className="bg-gray-50 min-h-screen flex items-center justify-center p-4">
+      <div className="max-w-4xl w-full mx-auto bg-white rounded-lg shadow-md p-8">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-4xl font-bold">Math Quiz App</h1>
+          <button
+            onClick={() => setShowCalculator(!showCalculator)}
+            className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"
+          >
+            <Calculator className="w-5 h-5" />
+            {showCalculator ? 'Hide Calculator' : 'Show Calculator'}
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="space-y-6">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="flex flex-col items-center gap-6">
+                <div className="flex gap-8 items-center justify-center">
+                  <div className="text-xl font-bold">Correct: {score}</div>
+                  <div className="text-xl font-bold text-red-500">Wrong: {wrongAnswers}</div>
+                </div>
+                <select
+                  value={difficulty}
+                  onChange={handleDifficultyChange}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 w-48 text-center"
+                >
+                  {difficulties.map((diff) => (
+                    <option key={diff} value={diff}>
+                      {diff.charAt(0).toUpperCase() + diff.slice(1)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="text-center">
+                <p className="text-3xl font-bold mb-6">
+                  What is {question.num1} {question.operation} {question.num2}?
+                </p>
+                <input
+                  type="number"
+                  value={userAnswer}
+                  onChange={(e) => setUserAnswer(e.target.value)}
+                  className="bg-gray-50 border border-gray-300 text-gray-900 text-xl rounded-lg focus:ring-blue-500 focus:border-blue-500 p-4 w-full text-center"
+                />
+              </div>
+              <div className="text-center">
+                <button
+                  type="submit"
+                  className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-lg px-8 py-3 text-center"
+                >
+                  Submit
+                </button>
+              </div>
+              {result && (
+                <p
+                  className={`text-xl font-bold text-center ${
+                    result === 'Correct!' ? 'text-green-500' : 'text-red-500'
+                  }`}
+                >
+                  {result}{' '}
+                  {result === 'Correct!' ? (
+                    <Check className="inline-block w-6 h-6" />
+                  ) : (
+                    <X className="inline-block w-6 h-6" />
+                  )}
+                </p>
               )}
-            </p>
+            </form>
+          </div>
+          
+          {showCalculator && (
+            <div className="flex justify-center">
+              <CalculatorComponent onClose={() => setShowCalculator(false)} />
+            </div>
           )}
-        </form>
+        </div>
       </div>
     </div>
   );
 };
 
-export default MathQuizApp;
+export default MathQuizApp;