تطبيق محاسبة تارك بلال

import React from 'react';
import './App.css';

function App() {
  return (
    <div className='App'>
      <header className='header'>
        <h1 className='logo'>Tarek Belal Calculator</h1>
      </header>
      <main className='main'>
        <section className='calculator'>
          <div className='display'>
            <input type='text' className='input' placeholder='0' disabled />
          </div>
          <div className='buttons'>
            <button className='button'>1</button>
            <button className='button'>2</button>
            <button className='button'>3</button>
            <button className='button'>+</button>
            <button className='button'>4</button>
            <button className='button'>5</button>
            <button className='button'>6</button>
            <button className='button'>-</button>
            <button className='button'>7</button>
            <button className='button'>8</button>
            <button className='button'>9</button>
            <button className='button'>*</button>
            <button className='button'>0</button>
            <button className='button'>.</button>
            <button className='button'>=</button>
            <button className='button'>/</button>
          </div>
        </section>
        <section className='history'>
          <h2 className='history-title'>History</h2>
          <ul className='history-list'>
            <li className='history-item'>1 + 1 = 2</li>
            <li className='history-item'>2 * 3 = 6</li>
            <li className='history-item'>10 - 5 = 5</li>
          </ul>
        </section>
      </main>
      <footer className='footer'>
        <p className='copyright'>© 2025 Tarek Belal. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;