feat: Add Order Lines

src/pages/catalog/Catalog.tsx

@@ -1,12 +1,13 @@
 import { ProductCards } from "./components";
 import { useEffect, useState } from "react";
-import type { Product } from "../../types";
+import type { Product, ProductLine } from "../../types";
 import Order from "./components/order/Order";
 import styles from "./Catalog.module.css";
 
 
 const Catalog = () => {
   const [products, setProducts] = useState<Product[]>([]);
+  const [productLines, setProductLines] = useState<ProductLine[] | []>([]);
 
   useEffect(() => {
     async function fetchProducts(){
@@ -21,14 +22,25 @@ const Catalog = () => {
     fetchProducts();
   }, []);
 
+  function addProductLine(product: Product, quantity: number){
+    const newProductLine: ProductLine = {
+      id: Date.now(),
+      product: product,
+      quantity: quantity,
+      unitPrice: product.price,
+      totalAmount: quantity * product.price,
+    };
+
+    setProductLines([...productLines, newProductLine]);
+  }
 
   return (
     <div className={styles.layout}>
       <section className={styles.catalog}>
-        <ProductCards products={products}/>
+        <ProductCards products={products} addProductLine={addProductLine}/>
       </section>
       <aside className={styles.order}>
-        <Order/>
+        <Order productLines={productLines}/>
       </aside>
     </div>
   )