selling Pg UI and Fav is done

frontend/src/components/ProductForm.jsx

@@ -0,0 +1,148 @@
+import React from "react";
+
+const ProductForm = ({
+  editingProduct,
+  setEditingProduct,
+  onSave,
+  onCancel,
+}) => {
+  return (
+    <div className="bg-white border border-gray-300 rounded-lg p-6 shadow-md">
+      {/* Back Button */}
+      <button
+        onClick={onCancel}
+        className="mb-4 text-sm text-blue-600 hover:underline flex items-center"
+      >
+        ← Back to Listings
+      </button>
+
+      <h3 className="text-xl font-bold text-gray-800 mb-6">
+        {editingProduct?.id ? "Edit Your Product" : "List a New Product"}
+      </h3>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Product Name */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Product Name
+          </label>
+          <input
+            type="text"
+            value={editingProduct.name}
+            onChange={(e) =>
+              setEditingProduct({ ...editingProduct, name: e.target.value })
+            }
+            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500"
+          />
+        </div>
+
+        {/* Price */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Price ($)
+          </label>
+          <input
+            type="number"
+            value={editingProduct.price}
+            onChange={(e) =>
+              setEditingProduct({
+                ...editingProduct,
+                price: e.target.value,
+              })
+            }
+            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500"
+          />
+        </div>
+
+        {/* Status */}
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Status
+          </label>
+          <select
+            value={editingProduct.status}
+            onChange={(e) =>
+              setEditingProduct({
+                ...editingProduct,
+                status: e.target.value,
+              })
+            }
+            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500"
+          >
+            <option value="Active">Active</option>
+            <option value="Inactive">Inactive</option>
+          </select>
+        </div>
+
+        {/* Images */}
+        <div className="md:col-span-2">
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Product Images (1–5)
+          </label>
+          <input
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={(e) => {
+              const files = Array.from(e.target.files).slice(0, 5);
+              setEditingProduct((prev) => ({
+                ...prev,
+                images: [...prev.images, ...files].slice(0, 5),
+              }));
+            }}
+            className="w-full px-4 py-2 border border-gray-300 rounded-md"
+          />
+
+          <div className="flex flex-wrap gap-4 mt-4">
+            {editingProduct.images.length > 0 &&
+              editingProduct.images.map((img, idx) => (
+                <div
+                  key={idx}
+                  className="relative group w-24 h-24 border border-gray-300 overflow-hidden"
+                >
+                  <img
+                    src={URL.createObjectURL(img)}
+                    alt={`Preview ${idx}`}
+                    className="w-full h-full object-cover"
+                  />
+                  <button
+                    onClick={() => {
+                      const updated = editingProduct.images.filter(
+                        (_, i) => i !== idx,
+                      );
+                      setEditingProduct((prev) => ({
+                        ...prev,
+                        images: updated,
+                      }));
+                    }}
+                    className="absolute top-1 right-1 bg-white bg-opacity-90 rounded-full p-1 shadow hover:bg-red-500 hover:text-white transition-all text-gray-700 group-hover:opacity-100 opacity-0"
+                    title="Remove image"
+                  >
+                    &times;
+                  </button>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="mt-6 flex justify-end gap-4">
+        <button
+          onClick={onCancel}
+          className="bg-gray-200 text-gray-700 px-5 py-2 rounded-md hover:bg-gray-300"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={onSave}
+          className="bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700"
+        >
+          {editingProduct.id ? "Update Product" : "Add Product"}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ProductForm;