Merge pull request #24 from bhagirathpaliyal/Order

style order card

Author: bhagirathpaliyal

src/components/Order/Order.jsx

@@ -25,15 +25,15 @@ console.log(orderItems)
       <h2>Your order</h2>
 
       {loading ? (
-       <div className=' flex gap-[20px] flex-wrap mx-[50px]'>
+       <div className=' flex flex-col gap-[20px]  mx-[50px]'>
     {  skeleton.map((data,index) => (
       <ItemSkeleton key={index}/>
     ))}
        </div>
       ) : (
         <>
 
-          <div className='flex flex-wrap gap-[20px] justify-center '>
+          <div className='flex flex-col gap-[20px] justify-center '>
             {orderItems.length > 0 ? (
               orderItems.map((item, index) => (
                 item.user.email === user.email && ( <OrderCard key={index}  data={item

src/components/Order/OrderCard.jsx

@@ -1,15 +1,37 @@
-import React from 'react'
+import React from 'react';
+import { Card, CardContent, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
-const OrderCard = (prop) => {
-  return (
-    <div className='border p-5 rounded-[10px]'>
-        <h4>OrderId : <span>{prop.data.orderId}</span></h4> 
-        <p>Product Name : <span>{prop.data.orderedProducts.name}</span></p>
-        <p>Product Price : <span>{prop.data.orderedProducts.Price}</span></p>
-        <p>Merchant Name : <span>{prop.data.merchant?.name}</span></p>
+const StyledCard = styled(Card)(({ theme }) => ({
+  borderRadius: '10px',
+  padding: theme.spacing(2),
+  boxShadow: theme.shadows[3],
+}));
 
-    </div>
-  )
-}
+const OrderCard = ({ data }) => {
+  return (
+    <StyledCard className="border p-5 rounded-[10px] flex  items-center">
+      <img
+        src={data.orderedProducts.image}
+        alt="Product"
+        className="h-[300px] w-auto mb-4"
+      />
+      <CardContent>
+        <Typography variant="h6" gutterBottom>
+          OrderId: <span className="font-bold">{data.orderId}</span>
+        </Typography>
+        <Typography variant="body1">
+          Product Name: <span className="font-bold">{data.orderedProducts.name}</span>
+        </Typography>
+        <Typography variant="body1">
+          Product Price: <span className="font-bold">${data.orderedProducts.Price}</span>
+        </Typography>
+        <Typography variant="body1">
+          Merchant Name: <span className="font-bold">{data.merchant?.name}</span>
+        </Typography>
+      </CardContent>
+    </StyledCard>
+  );
+};
 
-export default OrderCard
+export default OrderCard;