Add Product Partial

src/routes/Products/AddProduct/AddProduct.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import ProductsLists from "../../../Components/ProductsLists/ProductsLists";
+import { ProductType } from "../../../Components/ProductType/ProductType";
+import styles from "../../../styles";
+import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon";
+import ProductInfo from "../../../Components/ProductInfo/ProductInfo";
+
+
+export default function AddProduct() {
+  const [name, setName] = useState("");
+  const [stocks, setStocks] = useState("");
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleStocksChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setStocks(event.target.value);
+  };
+
+  const handleAddProduct = () => {
+    if (name && stocks) {
+      const newProduct: ProductType = {
+        id: ProductsLists.length + 1,
+        name: name,
+        stocks: parseInt(stocks),
+        lastModified: new Date().toLocaleString(),
+      };
+      ProductsLists.push(newProduct);
+    }
+    //window.location.href = "/Products";
+  };
+
+  const handleCancel = () => {
+    window.location.href = "/Products";
+  };
+
+  return (
+    <div style={{ margin: 32, height: "100%" }}>
+      <div style={styles.content_row}>
+        <ProductsIcon size={8} color="white" />
+        <h1 style={styles.text_large}>Products</h1>
+      </div>
+      <h1>Add Product</h1>
+      <label htmlFor="name">Name:</label>
+      <input type="text" id="name" value={name} onChange={handleNameChange} />
+      <br />
+      <label htmlFor="stocks">Stocks:</label>
+      <input
+        type="text"
+        id="stocks"
+        value={stocks}
+        onChange={handleStocksChange}
+      />
+      <br />
+      <button onClick={handleAddProduct}>Add</button>
+      <button onClick={handleCancel}>Cancel</button>
+      <ProductInfo products={ProductsLists} />
+    </div>
+  );
+}

src/routes/Products/Products.tsx

@@ -5,6 +5,10 @@ import ProductInfo from "../../Components/ProductInfo/ProductInfo";
 import ProductsLists from "../../Components/ProductsLists/ProductsLists";
 
 export default function Products() {
+  const handleAddProduct = () => {
+    window.location.href = "/Products/AddProduct";
+  };
+
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.content_row}>
@@ -12,6 +16,7 @@ export default function Products() {
         <h1 style={styles.text_large}>Products</h1>
       </div>
       <ProductInfo products={ProductsLists} />
+      <button onClick={handleAddProduct}>Add Product</button>
     </div>
   );
 }