计算器使用指南

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

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

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

  return (
    <div className="flex justify-center items-center h-screen bg-gray-900">
      <div className="bg-gray-800 p-6 rounded-lg shadow-lg text-white">
        <div className="text-right text-4xl mb-4 bg-gray-700 p-3 rounded">
          {input || '0'}
        </div>
        <div className="text-right text-2xl mb-4 bg-gray-700 p-3 rounded">
          {result}
        </div>
        <div className="grid grid-cols-4 gap-4">
          {['7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', 'C', '0', '=', '+'].map((btn) => (
            <button
              key={btn}
              onClick={() => handleClick(btn)}
              className="p-4 bg-gray-700 rounded hover:bg-gray-600 transition duration-200"
            >
              {btn}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default App;