update book cover

src/App.js

@@ -65,7 +65,7 @@ function App() {
         {/* <HeaderDesign1 /> */}
         {/* <ContactInfoSection /> */}
         {/* <FooterDesign1 /> */}
-        {/* <Testttt /> */}
+        <Testttt />
         {/* <Design2D /> */}
         {/* <Features /> */}
         {/* <Feedback /> */}
@@ -83,9 +83,9 @@ function App() {
         {/* <SidebarDesign2 /> */}
         {/* <SimpleBarChart /> */}
         {/* <SpecifiedDomainRadarChart/> */}
-        {/* <Design1/> */}
-        {/* <Design2/> */}
-        <TableDesign1 />
+        <Design1 />
+        {/* <Design2 /> */}
+        {/* <TableDesign1 /> */}
       </div>
     </Provider>
   );

src/components/Table/Design1/index.js

@@ -1,11 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 
 import arrowDown from "./arrow-down.svg";
 import arrowUp from "./arrow-up.svg";
 
 const TableDesign1 = ({ tableItems, tableSubItems }) => {
+  const [sortedField, setSortedField] = useState(null);
+
+  if (sortedField !== null) {
+    tableSubItems.sort((a, b) => {
+      if (a.payedPrice > b.payedPrice) {
+        return -1;
+      }
+    });
+  }
+
   return (
-    <section className="w-10/12 mx-auto my-10">
+    <section className="w-8/12 mx-auto my-10">
       <div className="flex flex-col">
         <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
@@ -13,7 +23,7 @@ const TableDesign1 = ({ tableItems, tableSubItems }) => {
               <table className="min-w-full divide-y divide-gray-200">
                 <thead className="bg-gray-50">
                   {tableItems.map((tableItem, index) => (
-                    <tr className="">
+                    <tr className="" key={index}>
                       <th
                         scope="col"
                         className="text-blue-400 font-light text-right text-sm p-4"
@@ -33,9 +43,9 @@ const TableDesign1 = ({ tableItems, tableSubItems }) => {
                               className="w-4 cursor-pointer"
                             />
                             <img
-                              src={arrowDown}
+                              src={arrowUp}
                               alt=""
-                              className="w-4 cursor-pointer"
+                              className="w-4 cursor-pointer rotate-180"
                             />
                           </div>
                         </div>
@@ -51,11 +61,12 @@ const TableDesign1 = ({ tableItems, tableSubItems }) => {
                               src={arrowUp}
                               alt=""
                               className="w-4 cursor-pointer"
+                              // onClick={() => setSortedField}
                             />
                             <img
-                              src={arrowDown}
+                              src={arrowUp}
                               alt=""
-                              className="w-4 cursor-pointer"
+                              className="w-4 cursor-pointer rotate-180"
                             />
                           </div>
                         </div>
@@ -71,11 +82,13 @@ const TableDesign1 = ({ tableItems, tableSubItems }) => {
                               src={arrowUp}
                               alt=""
                               className="w-4 cursor-pointer"
+                              onClick={() => setSortedField()}
                             />
                             <img
-                              src={arrowDown}
+                              src={arrowUp}
                               alt=""
-                              className="w-4 cursor-pointer"
+                              className="w-4 cursor-pointer rotate-180"
+                              // onClick={() => setSortedField()}
                             />
                           </div>
                         </div>
@@ -85,7 +98,7 @@ const TableDesign1 = ({ tableItems, tableSubItems }) => {
                 </thead>
                 <tbody className="bg-white divide-y divide-gray-200">
                   {tableSubItems.map((tableSubItem, i) => (
-                    <tr>
+                    <tr key={i}>
                       <td className="p-4 whitespace-nowrap text-base font-light">
                         {tableSubItem.title}
                       </td>
@@ -133,13 +146,25 @@ TableDesign1.defaultProps = {
       title: "مایکروویر سامسونگ مدل",
       status: true,
       date: "1400/09/21",
-      payedPrice: 2400000,
+      payedPrice: 73,
+    },
+    {
+      title: "آزمون آنلاین درس علوم تجربی",
+      status: false,
+      date: "1400/09/21",
+      payedPrice: 75,
+    },
+    {
+      title: "مایکروویر سامسونگ مدل",
+      status: true,
+      date: "1400/09/21",
+      payedPrice: 25,
     },
     {
       title: "آزمون آنلاین درس علوم تجربی",
       status: false,
       date: "1400/09/21",
-      payedPrice: 2400000,
+      payedPrice: 27,
     },
   ],
 };

src/components/testtttt/Testttt.js

@@ -1,13 +1,32 @@
 import React from "react";
 // import "./Testttt.scss";
 
-import book from "../../assets/images/book.svg";
-import bookCover from "../../assets/images/book-white-cover.svg";
+import book from "./book.svg";
+import bookCover from "./book-white-cover.svg";
 
 export const Testttt = ({ bookBackCoverBg }) => {
   return (
-    <section className="w-10/12 bg-white rounded-lg shadow-lg p-10 mx-auto my-10">
-      <div>mahdi</div>
+    <section className="my-20 ">
+      <div style={{ width: "20%" }} className="mx-auto">
+        <div
+          className="relative z-50	"
+          style={{
+            backgroundImage: `url(${book})`,
+            backgroundSize: "100% 100%",
+            backgroundRepeat: "no-repeat",
+            // minHeight: "300px",
+            height: "calc(100vh/2)",
+            // maxHeight: "300px",
+          }}
+        >
+          <img
+            src={bookCover}
+            alt=""
+            className="h-full absolute left-0 top-1/2 transform -translate-y-1/2 translate-x-4 z-0"
+          />
+          <div className="bg-green-400 w-4 rounded-tl-lg rounded-bl-lg h-full absolute left-0 top-1/2 transform -translate-y-1/2 translate-x-4 z-0"></div>
+        </div>
+      </div>
     </section>
   );
 };

src/components/testtttt/book-white-cover.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.489" height="304.353" viewBox="0 0 14.489 304.353">
+  <path id="Path_2" data-name="Path 2" d="M14.489,0,0,10.8V291.9l14.489,12.457Z" fill="#f2f2f2"/>
+</svg>