إنشاء آلة حاسبة

import React, { useState } from 'react';
import './App.css';

function App() {
 const [input, setInput] = useState('');
 const [result, setResult] = useState('');

 const handleClick = (value) => {
 if (value === '=') {
 try {
 setResult(eval(input).toString());
 } catch (error) {
 setResult('Error');
 }
 } else if (value === 'C') {
 setInput('');
 setResult('');
 } else {
 setInput(input + value);
 }
 };

 return (
 <div className="App bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
 <h1 className="text-4xl font-bold text-gray-800 mb-8">Calculator</h1>
 <div className="bg-white p-6 rounded-lg shadow-lg">
 <div className="mb-4">
 <input
 type="text"
 value={input}
 readOnly
 className="w-full p-2 text-right text-2xl border border-gray-300 rounded"
 />
 </div>
 <div className="mb-4">
 <input
 type="text"
 value={result}
 readOnly
 className="w-full p-2 text-right text-2xl border border-gray-300 rounded"
 />
 </div>
 <div className="grid grid-cols-4 gap-2">
 {['7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', 'C', '0', '=', '+'].map((button) => (
 <button
 key={button}
 onClick={() => handleClick(button)}
 className="p-4 text-2xl font-bold bg-gray-200 hover:bg-gray-300 rounded transition-all"
 >
 {button}
 </button>
 ))}
 </div>
 </div>
 <div className="mt-8 text-sm text-gray-500">
 © 2025 Calculator. All rights reserved.
 </div>
 </div>
 );
}

export default App;