From 251d656c95dae6184a295b736c445fce38f3c1e8 Mon Sep 17 00:00:00 2001
From: Gautamshahkiit <2029165@kiit.ac.in>
Date: Mon, 23 Aug 2021 14:51:00 +0530
Subject: [PATCH] =?UTF-8?q?your=20bids=20made=20better=20=F0=9F=98=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Bids.css | 18 ++++++++++++++++
 src/components/Bids.jsx | 48 ++++++++++++++++++++++++++++++++---------
 2 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Bids.css

diff --git a/src/components/Bids.css b/src/components/Bids.css
new file mode 100644
index 0000000..38c5014
--- /dev/null
+++ b/src/components/Bids.css
@@ -0,0 +1,18 @@
+td,
+th {
+  text-align: center;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0 15px;
+}
+
+tr {
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  transition: transform 250ms;
+}
+
+tr:hover {
+  transform: translateY(5px);
+}
diff --git a/src/components/Bids.jsx b/src/components/Bids.jsx
index 0ac5170..ca18b5b 100644
--- a/src/components/Bids.jsx
+++ b/src/components/Bids.jsx
@@ -1,7 +1,8 @@
 // import React, { useState } from "react";
-import { BidsData } from "./BidsData";
+// import { BidsData } from "./BidsData";
 import {useSelector} from 'react-redux';
 import "bootstrap/dist/css/bootstrap.min.css";
+import "./Bids.css"
 
 const Bids = () => {
   // const [rank, setRank] = useState(1);
@@ -13,6 +14,27 @@ const Bids = () => {
   //   return a - b;
   // });
   // console.log(rank)
+
+  const dated = (dt) => {
+    dt += 2
+    if(dt == 32){
+      dt = 1
+    } else if (dt == 33){
+      dt = 2
+    }
+    return dt;
+  }
+
+  var today = new Date();
+
+  var date =
+    today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + (dated(today.getDate()));
+
+  // var time =
+  //   today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
+
+  var dateTime = date;
+  
   const products = useSelector((state)=>state.products);
   const userBids = useSelector((state)=>state.userBids);
   const styleArray = ["table-primary","table-secondary","table-success","table-info","table-warning"]
@@ -20,11 +42,12 @@ const Bids = () => {
   return (
     <div
       className="your-bids"
-      style={{ height: "100vh", width: "80vw", margin: "0 auto" }}
+      style={{ height: "100vh", width: "60vw", margin: "0 auto" }}
     >
       <table class="table">
         <thead>
           <tr>
+            <th scope="col">S No. </th>
             <th scope="col">Item</th>
             <th scope="col">Highest Bidder</th>
             <th scope="col">bidamt</th>
@@ -35,18 +58,23 @@ const Bids = () => {
           {userBids.map((item, index) => {
             return (
               <tr
-                className={styleArray[index%styleArray.length]}
+                // className={styleArray[index % styleArray.length]}
                 key={index}
-                style={{ border: "1px solid black", borderRadius: "15px" }}
+                // style={{
+                //   border: "1px solid black",
+                // }}
               >
-                <img
-                  src={products[item.productId-1].Image}
-                  alt="item picture"
-                  style={{ height: "222px", width: "154px" }}
-                ></img>
+                <td>{index + 1}</td>
+                <td>
+                  <img
+                    src={products[item.productId - 1].Image}
+                    alt="item picture"
+                    style={{ height: "222px", width: "154px" }}
+                  ></img>
+                </td>
                 <td>You</td>
                 <td>{item.bid}</td>
-                <td>25th August</td>
+                <td>{dateTime}</td>
               </tr>
             );
           })}