feat: Add Order Lines

src/pages/catalog/Catalog.module.css

@@ -23,14 +23,17 @@
     top: 2rem;            /* se queda pegada al hacer scroll */
     height: fit-content;  /* sólo el alto que necesite su contenido */
     background: rgba(255, 255, 255, 0.9);
-    border: 1px solid darkviolet;
+    border: 1px solid snow;
     border-radius: 24px;
     box-shadow: 0 48px 56px rgba(0, 0, 0, 0.1);
     padding: 1.5rem;
+    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
+    cursor: pointer;
 }
 
 .order:hover {
-    border: 3px dotted darkviolet;
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 36px 64px rgba(0, 0, 0, 0.15);
 }
 
 /* Responsive: en pantallas estrechas se apilan */

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>
   )

src/pages/catalog/components/order/Order.tsx

@@ -1,6 +1,13 @@
+import OrderLine from './components/order_line/OrderLine';
 import styles from './Order.module.css'
+import type { ProductLine } from '../../../../types.ts'
+
+type OrderProps = {
+  productLines: ProductLine[];
+}
+
+const Order = ({productLines = []} : OrderProps) => {
 
-const Order = () => {
   return (
     <div className={styles.container}>
       <h1>Compra #5428</h1>
@@ -11,16 +18,16 @@ const Order = () => {
       </div>
 
       <div>
-        <p>Tomate Orgánico 500g 12000</p>
-        <p>Espinaca Orgánica 250g 8500</p>
-        <p>Zanahoria Orgánica 1Kg 9500</p>
-        <p>Palta Orgánica 1U 4500</p>
-        <p>Banano Orgánico 1Kg 5500</p>
-        <p>Mango Orgánico 1U 3500</p>
-        <p>Fresa Orgánica 250g 12000</p>
-        <p>Pimentón Orgánico 500g 10500</p>
-        <p>Cebolla Orgánica 500g 5500</p>
-        <p>Manzana Orgánica 500g 8000</p>
+        { productLines.length > 0 ? (
+
+          productLines.map((line) => {
+            return <OrderLine key={line.id} line={line}/>
+          }
+
+          )) : (
+            <p>No hay productos en el pedido</p>
+          )
+        }
       </div>
 
       <div>
@@ -28,10 +35,15 @@ const Order = () => {
         <span>Domicilio: $10.000 COP</span><br/>
         <span>Total: $210.000 COP</span>
       </div>
+      <div>
+        <label>Comentario:</label>
+        <input type="text"/>
+      </div>
 
-      <label>Comentario:</label>
-      <input type="text"/><br/>
-      <button>Pagar</button>
+      <div>
+        <button>Pagar</button>
+        <button>Credito</button>
+      </div>
     </div>
   )
 }

src/pages/catalog/components/order/components/order_line/OrderLine.tsx

@@ -0,0 +1,20 @@
+import type { ProductLine } from '../../../../../../types.ts'
+
+
+type OrderLineProps = {
+  line: ProductLine;
+}
+
+
+const OrderLine = ( {line} : OrderLineProps ) => {
+  const { product, quantity, unitPrice, totalAmount } = line;
+
+  return (
+    <>
+      <p>{product.name} {quantity}{product.uomSymbol} {unitPrice} {totalAmount} <button>Eliminar</button></p>
+    </>
+  )
+}
+
+
+export default OrderLine;

src/pages/catalog/components/product_cards/ProductCards.module.css

@@ -2,7 +2,7 @@
 .container {
     display: flex;
     justify-content: center;
-    border: 1px solid darkviolet;
+    border: 1px solid snow;
     display: flex;
     flex-wrap: wrap;
     border-radius: 32px;

src/pages/catalog/components/product_cards/ProductCards.tsx

@@ -5,23 +5,15 @@ import styles from "./ProductCards.module.css"
 
 type ProductCardProps = {
   products: Product[];
+  addProductLine: (product: Product, quantity: number) => void;
 }
 
-const ProductCards = ({ products } : ProductCardProps) => {
-
+const ProductCards = ({ products, addProductLine } : ProductCardProps) => {
   return (
     <div className={styles.container}>
       { products.map((product) => {
         return (
-          <div key={product.id}>
-            <Card
-              image={product.image}
-              name={product.name}
-              price={product.price}
-              description={ product.description}
-              cardId={product.id}
-            />
-          </div>
+            <Card key={product.id} product={product} addProductLine={addProductLine}/>
         )
       }) }
     </div>

src/pages/catalog/components/product_cards/components/card/Card.module.css

@@ -6,26 +6,30 @@
     border: 3px solid snow;
     box-shadow: 0 24px 56px rgba(0, 0, 0, 0.1);
     width: 325px;
-    height: 500px;
+    height: 530px;
     padding: 10px;
     margin: 8px;
+    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
+    cursor: pointer;
 }
 
 .container:hover {
-    border: 3px dotted pink;
+    /* border: 3px dotted black; */
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 36px 64px rgba(0, 0, 0, 0.15);
 }
 
 .button_container {
     display: flex;
     flex-direction: column;
-    gap: 16px
+    gap: 8px
 }
 
 .button_container button {
     display: flex;
     flex-direction: column;
     font-weight: bold;
-    background-color: #667eea;
+    background-color: #F54A27;
     color: white;
     border: none;
     border-radius: 8px;
@@ -37,5 +41,45 @@
 }
 
 .button_container button:hover {
-    background-color: #5a6fd8;
+    background-color: #FF907D;
+}
+
+
+.product_name {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #F54A27;
+    margin: 4px 0 8px 0;
+    text-align: center;
+    letter-spacing: -0.5px;
+}
+
+.price {
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: #F54A27; /* Mismo color que tus botones para consistencia */
+  margin: 8px 0 16px 0;
+  text-align: center;
+  background: linear-gradient(120deg, #F54A27 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.description {
+  font-size: 0.95rem;
+  /* color: #666; */
+  text-align: center;
+  margin: 16px 0;
+  line-height: 1.4;
+  flex-grow: 1; /* Para que ocupe el espacio disponible */
+}
+
+
+.details {
+    margin: 8px 0 16px;
+    text-align: center;
+    font-size: 1rem;
+    /* color: #666; */
+    cursor: pointer;
 }

src/pages/catalog/components/product_cards/components/card/card.tsx

@@ -1,25 +1,36 @@
+import { useState } from 'react';
+import type { Product } from '../../../../../../types';
 import styles from './Card.module.css'
 
 type CardProps = {
-  image: string;
-  name: string;
-  price: number;
-  description: string;
-  cardId: number
+  product: Product;
+  addProductLine: (product: Product, quantity: number) => void;
 }
 
 
-const Card = ({ image, name, price, description, cardId } : CardProps) => {
+const Card = ({ product, addProductLine } : CardProps) => {
+  const {id, name, price, description, image } = product;
+  const [quantity, setQuantity] = useState<number>(0);
+
   return (
-    <div className={styles.container} key={cardId}>
-      <img src={`${image}`} alt="Imagen"/>
-      <p>{name}</p>
-      <p>{price}</p>
-      <p>{description}</p>
+    <div className={styles.container} key={id}>
+      <p className={styles.product_name}>{name}</p>
+
+      <img src={`${image}`} alt={`${description}`}/>
+      <p className={styles.price}>${price} COP</p>
+
+      <details className={styles.details}>
+        <summary>Ver descripción</summary>
+        <p className={styles.description}>{description}</p>
+      </details>
+
+      <input type='number' value={quantity} onChange={
+        (event) => setQuantity(Number(event.target.value))
+      }/>
 
       <div className={styles.button_container}>
         <button>Conocer Origen</button>
-        <button>Agregar</button>
+        <button onClick={() => addProductLine(product, quantity)}>Agregar</button>
       </div>
     </div>
   )

src/types.ts

@@ -4,4 +4,15 @@ export type Product = {
   price: number;
   description: string;
   image: string;
+  uomId: number;
+  uomSymbol: string;
+  unitPrice: number;
 };
+
+export type ProductLine = {
+  id: number;
+  product: Product;
+  quantity: number;
+  unitPrice: number;
+  totalAmount: number;
+}