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

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

const App = () => {
  return (
    <div className="app min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 text-white">
      <header className="header p-6 text-center">
        <h1 className="text-4xl font-bold">Tariq Bilal Calculator</h1>
        <p className="mt-2 text-lg">Simple and Practical Accounting Solution</p>
      </header>

      <main className="main flex flex-col items-center justify-center p-4">
        <div className="calculator bg-white/10 backdrop-blur-md rounded-lg p-6 w-full max-w-md">
          <div className="display bg-black/20 rounded p-4 mb-4 text-right text-3xl">0</div>
          <div className="buttons grid grid-cols-4 gap-2">
            {['7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '=', '+'].map((btn) => (
              <button key={btn} className="button bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded">
                {btn}
              </button>
            ))}
          </div>
        </div>

        <div className="history mt-8 w-full max-w-md">
          <h2 className="text-2xl font-bold mb-4">Journal Entries</h2>
          <ul className="list-disc list-inside bg-white/10 backdrop-blur-md rounded-lg p-6">
            <li className="mb-2">Entry 1: Sum of 100</li>
            <li className="mb-2">Entry 2: Difference of 50</li>
            <li>Entry 3: Product of 200</li>
          </ul>
        </div>
      </main>

      <footer className="footer p-4 text-center text-sm">
        © 2025 Tariq Bilal. All rights reserved.
      </footer>
    </div>
  );
};

export default App;