made components that create and edit item can share, started item detail changes, listings provide more views

frontend/src/components/ImageUpload.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+interface ImageUploadProps {
+  imageFiles: File[];
+  imagePreviews: string[];
+  onImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onRemoveImage: (index: number) => void;
+  error: string;
+}
+
+const ImageUpload: React.FC<ImageUploadProps> = ({
+  imageFiles,
+  imagePreviews,
+  onImageChange,
+  onRemoveImage,
+  error
+}) => {
+  return (
+    <div className="card mb-4">
+      <div className="card-body">
+        <div className="mb-3">
+          <label className="form-label mb-0">
+            Upload Images (Max 5)
+          </label>
+          <div className="form-text mb-2">
+            Have pictures of everything that's included
+          </div>
+          <input
+            type="file"
+            className="form-control"
+            onChange={onImageChange}
+            accept="image/*"
+            multiple
+            disabled={imageFiles.length >= 5}
+          />
+        </div>
+
+        {imagePreviews.length > 0 && (
+          <div className="row mt-3">
+            {imagePreviews.map((preview, index) => (
+              <div key={index} className="col-6 col-md-4 col-lg-3 mb-3">
+                <div className="position-relative">
+                  <img
+                    src={preview}
+                    alt={`Preview ${index + 1}`}
+                    className="img-fluid rounded"
+                    style={{
+                      width: "100%",
+                      height: "150px",
+                      objectFit: "cover",
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-danger position-absolute top-0 end-0 m-1"
+                    onClick={() => onRemoveImage(index)}
+                  >
+                    <i className="bi bi-x"></i>
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImageUpload;