Reto: órdenes de compra con TailwindCSS

Así quedo My Orders.

También le agregué que en el momento que haga Clic al botón Checkout se oculte el CheckoutSide

 const handleCheckout = () => {
    const orderToAdd = {
      date: "01.02.23",
      products: cartProducts,
      totalProducts: cartProducts.length,
      totalPrice: totalPrice(cartProducts),
    };

    setOrder([...order, orderToAdd]);
    setCartProducts([]);
    closeCheckoutSideMenu();
  };

Por otra parte tiene un pequeño bug, si se agrega un producto al carro, no deja ver el detalle de un producto seo se corrige en el componente Card, agregando el closeCheckoutSideMenu();

const showProduct = (productDetail) => {
    closeCheckoutSideMenu();
    openProductDetail();
    setProductToShow(productDetail);
  };

No sé qué estará pasando en la Platzi API pero estoy saturado de Kanye West jajaaj

Si quieren poner la fecha actual pueden hacerlo asi:

    const currentDate = () => {
        const date = new Date().toLocaleDateString();
        return date
     }

En el componente seria así:

...
  <p className='flex flex-col'>
          <span className='font-light'>{currentDate()}</span>
          <span className='font-light'>{totalProducts} articles</span>
        </p>
            ...

Me gusto la idea de colocar los iconos pequeños al interior. Ademas le coloque un shadow a la tarjeta que creo que le va bien 😃

mi pagina de orders

Emocionado con los avances!!!

Así me quedó:

Asi me quedo!

Asi quedo mi pantalla de My Orders

Así quedo estilizada la pagina de ordenes de compra ![](

¿Como puedo subir imagenes para ir pasando los resultados?

Aqui mi dejo mi resultado y mi repo, me falta la fecha como props

:v

Asi quedo My Orders.
Inclui un ID aleatorio generado, porque creo que si es importante identificar las ordenes por separado.

El reto lo solucione a mi manera, les comparto los resultados:

Asi vamos…

Para crear el ID de cada orden utilicé el método getTime() de la clase Date para generar un ID único para la orden. Extraje la fecha de la propiedad ‘order.date’, creé un objeto Date a partir de esa cadena y luego obtuve el timestamp correspondiente en milisegundos. Finalmente, convertí el resultado del timestamp en una cadena para obtener el ID deseado

const id = new Date(order?.date).getTime();