Created product creation form

src/component/ProductForm.jsx

-import React from 'react'
+import React, { useState } from "react";
 
 export default function ProductForm({ product }) {
+  const [form, setForm] = useState({
+    sku: "",
+    upc: "",
+    productName: "",
+    brand: "",
+    category: "",
+    price: 0.0,
+    stock: 0,
+    productDescription: "",
+    productImage: "",
+  });
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    // TODO send form to products API
+    console.log(form);
+  };
+
   return (
-    <div>
-      PRODUCT FORM
+    <div class="container">
+      <form onSubmit={onSubmit}>
+        <div className="row mt-3">
+          <div className="col">
+            <label htmlFor="productSku" className="form-label">
+              SKU
+            </label>
+            <input
+              name="sku"
+              type="text"
+              className="form-control"
+              id="productSku"
+              value={form.sku}
+              onChange={(e) => setForm({ ...form, sku: e.target.value })}
+            />
+          </div>
+          <div className="col">
+            <label htmlFor="productUpc" className="form-label">
+              UPC
+            </label>
+            <input
+              name="upc"
+              type="text"
+              className="form-control"
+              id="productUpc"
+              value={form.upc}
+              onChange={(e) => setForm({ ...form, upc: e.target.value })}
+            />
+          </div>
+        </div>
+        <div className="row mt-3">
+          <div className="col-6">
+            <div>
+              <label htmlFor="productName" className="form-label">
+                Name
+              </label>
+              <input
+                name="productName"
+                type="text"
+                className="form-control"
+                id="productName"
+                value={form.productName}
+                onChange={(e) =>
+                  setForm({ ...form, productName: e.target.value })
+                }
+              />
+            </div>
+            <div>
+              <label htmlFor="brand" className="form-label">
+                Brand
+              </label>
+              <input
+                name="brand"
+                type="text"
+                className="form-control"
+                id="brand"
+                value={form.brand}
+                onChange={(e) => setForm({ ...form, brand: e.target.value })}
+              />
+            </div>
+            <div>
+              <label htmlFor="category" className="form-label">
+                Category
+              </label>
+              <input
+                name="category"
+                type="text"
+                className="form-control"
+                id="category"
+                value={form.category}
+                onChange={(e) => setForm({ ...form, category: e.target.value })}
+              />
+            </div>
+          </div>
+          <div className="col-6">
+            <label htmlFor="productDescription" className="form-label">
+              Description
+            </label>
+            <textarea
+              name="productDescription"
+              id="productDescription"
+              cols="40"
+              rows="7"
+              className="form-control"
+              value={form.productDescription}
+              onChange={(e) =>
+                setForm({ ...form, productDescription: e.target.value })
+              }
+            ></textarea>
+          </div>
+        </div>
+        <div className="row mt-3">
+          <div>
+            <label htmlFor="price" className="form-label">
+              Price
+            </label>
+            <input
+              name="price"
+              type="number"
+              className="form-control"
+              id="price"
+              value={form.price}
+              onChange={(e) => setForm({ ...form, price: e.target.value })}
+            />
+          </div>
+          <div>
+            <label htmlFor="stock" className="form-label">
+              Stock
+            </label>
+            <input
+              name="stock"
+              type="number"
+              className="form-control"
+              id="stock"
+              value={form.stock}
+              onChange={(e) => setForm({ ...form, stock: e.target.value })}
+            />
+          </div>
+        </div>
+        <div className="row mt-3">
+          <label htmlFor="productImage" className="form-label">
+            Product Image
+          </label>
+          <input
+            id="productImage"
+            name="productImage"
+            className="form-control form-control-lg"
+            type="file"
+            value={form.productImage}
+            onChange={(e) => setForm({ ...form, productImage: e.target.value })}
+          ></input>
+        </div>
+
+        <div className="row mt-3">
+          <div className="col-12">
+            <button type="submit" className="btn btn-primary mt-3">
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
     </div>
-  )
+  );
 }