🔨 Ordenes de compra taillwindCSS

Klauditha · Dec 3, 2023 · 7c2812d · 7c2812d
1 parent b8bb965
commit 7c2812d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/Components/OrdersCard/OrdersCard.jsx b/src/Components/OrdersCard/OrdersCard.jsx
@@ -1,16 +1,21 @@
+import { ChevronRightIcon } from '@heroicons/react/24/solid';
 /* eslint-disable react/prop-types */
 
-
 const OrdersCard = (props) => {
   const { totalPrice, totalProducts } = props;
 
   return (
-    <div className="flex justify-between items-center mb-3 border border-black">
-      <p>
-        <span>01.02.23</span>
-        <span>{totalProducts}</span>
-        <span>{totalPrice}</span>
-      </p>
+    <div className="flex justify-between items-center mb-3 border border-black w-80 p-4 rounded-lg">
+      <div className="flex justify-between w-full">
+        <p className="flex flex-col">
+          <span className="font-light">01.02.23</span>
+          <span className="font-light">{totalProducts} articles</span>
+        </p>
+        <p className='flex items-center gap-2'>
+          <span className="font-medium text-2xl ">${totalPrice}</span>
+          <ChevronRightIcon className="h-6 w-6 text-black cursor-pointer" />
+        </p>
+      </div>
     </div>
   );
 };

diff --git a/src/Pages/MyOrders/MyOrders.jsx b/src/Pages/MyOrders/MyOrders.jsx
@@ -9,8 +9,8 @@ const MyOrders = () => {
   console.log(context.order)
   return (
     <Layout>
-      <div className="flex w-80  relative items-center justify-center">
-        <h1>My Orders</h1>
+      <div className="flex w-80  relative items-center justify-center mb-4">
+        <h1 className='font-medium text-xl'>My Orders</h1>
       </div>
       {context.order.map((order, index) => (
         <Link key={index} to={`/my-orders/${index}`}>