تصميم متجر بايثن سهل

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

const App = () => {
  const [products, setProducts] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredProducts, setFilteredProducts] = useState([]);

  useEffect(() => {
    // Fetch products from an API or local storage
    const fetchedProducts = [
      { id: 1, name: 'Product 1', description: 'Description 1', date: '2025-01-01' },
      { id: 2, name: 'Product 2', description: 'Description 2', date: '2025-01-02' },
      // Add more products as needed
    ];
    setProducts(fetchedProducts);
    setFilteredProducts(fetchedProducts);
  }, []);

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
    const filtered = products.filter(product =>
      product.name.toLowerCase().includes(event.target.value.toLowerCase())
    );
    setFilteredProducts(filtered);
  };

  return (
    <div className="App bg-wood-light min-h-screen p-8">
      <header className="text-center mb-8">
        <h1 className="text-4xl font-bold text-wood-dark">Small Store</h1>
        <input
          type="text"
          placeholder="Search products..."
          value={searchTerm}
          onChange={handleSearch}
          className="mt-4 p-2 border border-wood-dark rounded"
        />
      </header>
      <main className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredProducts.map(product => (
          <div key={product.id} className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-xl font-semibold text-wood-dark">{product.name}</h2>
            <p className="text-wood-medium mt-2">{product.description}</p>
            <p className="text-wood-light mt-2">Published on: {product.date}</p>
            <div className="mt-4">
              <textarea
                placeholder="Add a comment..."
                className="w-full p-2 border border-wood-dark rounded"
              />
              <button className="mt-2 bg-wood-dark text-white px-4 py-2 rounded">Comment</button>
            </div>
          </div>
        ))}
      </main>
      <footer className="text-center mt-8 text-wood-light">
        <p>© 2025 Small Store. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;