Merge pull request #1438 from Tanmay-Mirgal/main

Responsive OrderDetails Page Is Done
codervivek5 · Jun 21, 2024 · fb73e8d · fb73e8d
2 parents c090b7d + 254365a
commit fb73e8d
Showing 1 changed file with 18 additions and 20 deletions.
diff --git a/Front-with-React/VigyBag/src/pages/Order/Orderdetails.jsx b/Front-with-React/VigyBag/src/pages/Order/Orderdetails.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import TUMBLER from '../../assets/TUMBLER.png'
-import tick from '../../assets/tick.png'
-import {Link} from 'react-router-dom';
+import TUMBLER from '../../assets/TUMBLER.png';
+import tick from '../../assets/tick.png';
+import { Link } from 'react-router-dom';
 
 const OrderDetails = () => (
-  <div className="bg-[#fff0e3ff] p-6 mt-1">
+  <div className="bg-[#fff0e3ff] p-4 sm:p-6 mt-1">
     <Breadcrumbs />
-    <h1 className="text-2xl font-bold mb-4">Order Details</h1>
+    <h1 className="text-xl sm:text-2xl font-bold mb-4">Order Details</h1>
     <OrderInfo />
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 ">
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
       <Card title="Shipping Address">
         <Address />
       </Card>
@@ -22,21 +22,21 @@ const OrderDetails = () => (
 );
 
 const Breadcrumbs = () => (
-  <div className="text-sm text-zinc-500 mb-2 absolute"style={{left:'1.5vw',top:'10.5vh'}}>
+  <div className="text-sm text-zinc-500 mb-2 relative" 
+  style={{ left: '1vw', top: '.5vh' }}>
     <Link to="/dashboard" className="hover:underline">Dashboard</Link> &gt;
-    <Link to="/cart" className='hover:underline'>Cart</Link> &gt;
-     <Link to="/myOrders" className="hover:underline">My Orders</Link> &gt; 
-     <Link to="/orderDetails" className='hover:underline'>Order Details</Link>
+    <Link to="/cart" className="hover:underline">Cart</Link> &gt;
+    <Link to="/myOrders" className="hover:underline">My Orders</Link> &gt;
+    <Link to="/orderDetails" className="hover:underline">Order Details</Link>
   </div>
 );
 
-
 const OrderInfo = () => (
   <p className="text-sm text-zinc-600 mb-4">Ordered on 8 June 2024 | ORDER #123-456789-0987654</p>
 );
 
 const Card = ({ title, children }) => (
-  <div className="bg-white p-4 rounded shadow bg-[#fff0e3ff]"style={{border:'2px solid black'}}>
+  <div className="bg-white p-4 rounded shadow bg-[#fff0e3ff] border-2 border-black">
     <h2 className="font-bold mb-2">{title}</h2>
     {children}
   </div>
@@ -79,14 +79,12 @@ const OrderSummary = () => (
 const OrderStatus = () => (
   <Card title="Arriving Wednesday">
     <p className="text-sm text-zinc-600 mb-4">Not Yet Dispatched</p>
-    <div className="flex items-start">
-      <img src={TUMBLER} alt="Product Image" className="w-24 h-24 object-cover rounded mr-4" />
+    <div className="flex flex-col sm:flex-row items-start">
+      <img src={TUMBLER} alt="Product Image" className="w-24 h-24 object-cover rounded mr-4 mb-4 sm:mb-0" />
       <div className="flex-1">
         <h3 className="font-bold">BAMBOO PRODUCT - TUMBLER</h3>
-        <p className="text-sm text-zinc-600 mb-2">Crafted from 100% natural bamboo with a stainless steel interior,
-             this tumbler keeps beverages hot or cold for hours. Features a spill-proof lid and a sleek, modern design.<br></br>
-             This eco-conscious travel tumbler has a bamboo exterior and double-wall insulation to maintain drink temperature. 
-             It includes a leak-proof lid, ideal for on-the-go use.</p>
+        <p className="text-sm text-zinc-600 mb-2">Crafted from 100% natural bamboo with a stainless steel interior, this tumbler keeps beverages hot or cold for hours. Features a spill-proof lid and a sleek, modern design.<br></br>
+          This eco-conscious travel tumbler has a bamboo exterior and double-wall insulation to maintain drink temperature. It includes a leak-proof lid, ideal for on-the-go use.</p>
         <p className="text-sm text-zinc-600 mb-2">Sold by - Bamboo India</p>
         <p className="font-bold">₹350</p>
         <p className="text-sm text-zinc-600 mb-2">New</p>
@@ -96,8 +94,8 @@ const OrderStatus = () => (
         </div>
       </div>
     </div>
-    <div className="flex justify-between mt-4">
-      <button className="bg-green-600 text-white px-4 py-2 rounded">Track Package</button>
+    <div className="flex flex-col sm:flex-row justify-between mt-4">
+      <button className="bg-green-600 text-white px-4 py-2 rounded mb-2 sm:mb-0">Track Package</button>
       <button className="bg-zinc-600 text-white px-4 py-2 rounded">Cancel Order</button>
     </div>
     <p className="text-sm text-zinc-600 mt-2">Shipping Speed: Standard Delivery</p>