تطبيق قراءة أسعار الباركود

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

const App = () => {
  const [barcode, setBarcode] = useState('');
  const [price, setPrice] = useState(null);

  const products = {
    '123456789': '5.99',
    '987654321': '9.99',
    '456789123': '2.99'
  };

  const handleBarcodeChange = (event) => {
    setBarcode(event.target.value);
  };

  const lookupPrice = () => {
    const productPrice = products[barcode];
    if (productPrice) {
      setPrice(productPrice);
    } else {
      setPrice('Not found');
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="text-4xl font-bold text-white">Food Price Scanner</h1>
      </header>
      <main className="flex flex-col items-center justify-center p-8">
        <div className="w-full max-w-md">
          <input
            type="text"
            value={barcode}
            onChange={handleBarcodeChange}
            placeholder="Enter barcode"
            className="w-full p-2 mb-4 border rounded"
          />
          <button
            onClick={lookupPrice}
            className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-700"
          >
            Lookup Price
          </button>
        </div>
        {price && (
          <div className="mt-4">
            <h2 className="text-2xl font-semibold">Price: ${price}</h2>
          </div>
        )}
      </main>
      <footer className="mt-8 p-4 bg-gray-800 text-white text-center">
        <p>Footer Content © 2025</p>
      </footer>
    </div>
  );
};

export default App;