تطبيق متجر ملابس عربي

import React, { useState } from 'react';

const App = () => {
 const [products, setProducts] = useState([
 {
 id: 1,
 name: 'تيشرت رجالي',
 sizes: ['S', 'M', 'L', 'XL'],
 colors: ['أحمر', 'أزرق', 'أخضر'],
 price: 50,
 image: 'https://placehold.co/300X300'
 },
 {
 id: 2,
 name: 'جينز نسائي',
 sizes: ['XS', 'S', 'M', 'L'],
 colors: ['أسود', 'رمادي', 'أبيض'],
 price: 70,
 image: 'https://placehold.co/300X300'
 }
 ]);

 const handleAddProduct = () => {
 const newProduct = {
 id: products.length + 1,
 name: 'منتج جديد',
 sizes: ['M', 'L'],
 colors: ['أحمر', 'أزرق'],
 price: 30,
 image: 'https://placehold.co/300X300'
 };
 setProducts([...products, newProduct]);
 };

 const handleRemoveProduct = (id) => {
 setProducts(products.filter(product => product.id !== id));
 };

 return (
 <div className="container mx-auto p-4">
 <h1 className="text-3xl font-bold text-center mb-8">متجر الملابس</h1>
 <button onClick={handleAddProduct} className="bg-blue-500 text-white p-2 rounded mb-4">إضافة منتج</button>
 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
 {products.map(product => (
 <div key={product.id} className="bg-white shadow-lg rounded-lg p-4">
 <img src={product.image} alt={product.name} className="w-full h-48 object-cover rounded-t-lg" />
 <h2 className="text-xl font-semibold mt-4">{product.name}</h2>
 <p className="text-gray-600">المقاسات: {product.sizes.join(', ')}</p>
 <p className="text-gray-600">الألوان: {product.colors.join(', ')}</p>
 <p className="text-gray-800 font-bold mt-2">السعر: {product.price} ريال</p>
 <button onClick={() => handleRemoveProduct(product.id)} className="bg-red-500 text-white p-2 rounded mt-4">إزالة المنتج</button>
 </div>
 ))}
 </div>
 </div>
 );
};

export default App;