Books Page 30%

src/Pages/Account/Account.css

@@ -52,4 +52,10 @@
 
 .account__accountProfileInfo p:nth-child(3) {
     color: gray;
+}
+
+@media only screen and (min-width: 120px) and (max-width: 1000px) {
+    .account__page {
+        flex-direction: column;
+    }
 }

src/Pages/Books/Books.css

@@ -1,3 +1,114 @@
 .books__page {
     padding: 5px 5%;
+}
+
+.books__booksListPart {
+    display: grid;
+    gap: 15px;
+    grid-template-columns: repeat(4, 1fr);
+}
+
+.books__bookItem {
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 1px solid lightgray;
+    border-radius: 10px;
+}
+
+.books__bookItemImage {
+    overflow: hidden;
+    height: 300px;
+    cursor: pointer;
+}
+
+.books__bookItemImage img {
+    width: 100%;
+    transition: all 0.5s ease-in-out;
+}
+
+.books__bookItemImage img:hover {
+    transform: scale(1.1);
+}
+
+.books__bookItemInfo {
+    padding: 10px 0;
+}
+
+.books__bookItemInfo p {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+
+}
+
+.books__bookPagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 15px 0;
+}
+
+.books__bookPagination span {
+    color: rgb(0, 0, 0);
+    padding: 8px 25px;
+    text-align: center;
+    font-size: 16px;
+    border-top: 1px solid rgb(0, 0, 0);
+    border-bottom: 1px solid rgb(0, 0, 0);
+    letter-spacing: 0.5px;
+    transition: all 0.5s ease-in-out;
+}
+
+.books__bookPagination button {
+    background-color: #a8c4f8;
+    border: none;
+    color: rgb(0, 0, 0);
+    padding: 0px 25px;
+    text-align: center;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 36px;
+    cursor: pointer;
+    letter-spacing: 0.5px;
+    transition: all 0.5s ease-in-out;
+}
+
+.books__bookPagination button:disabled {
+    background-color: lightgray;
+}
+
+.books__bookPagination button:disabled:hover {
+    background-color: lightgray;
+    color: black;
+}
+
+.books__bookPagination button:hover {
+    background-color: #0058fc;
+    color: rgb(255, 255, 255);
+}
+
+
+
+@media only screen and (max-width: 450px) {
+    .books__booksListPart {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media only screen and (min-width: 451px) and (max-width: 800px) {
+    .books__booksListPart {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media only screen and (min-width: 801px) and (max-width: 1100px) {
+    .books__booksListPart {
+        grid-template-columns: repeat(3, 1fr);
+    }
 }

src/Pages/Books/Books.jsx

@@ -1,13 +1,42 @@
 import React from 'react'
 import './Books.css'
 import activePage from '../../compenent/ActivePage/ActivePage'
+import BooksList from './BooksList.js'
+
 
 function Books() {
+    const [booksListData, setBooksListData] = React.useState([])
+    const [pageNumber, setpageNumber] = React.useState(0)
+
     React.useEffect(() => {
         activePage("books__page")
+        setBooksListData(BooksList())
     }, []);
+
+
+
     return (
-        <div className='books__page'>Books</div>
+        <div className='books__page'>
+            <div className="books__booksListPart">
+                {booksListData.map((data, index) => {
+                    return <div key={index} className='books__bookItem'>
+                        <div className='books__bookItemImage'>
+                            <img src={data.product_img_url} alt="" />
+                        </div>
+                        {/* <div className='books__bookItemInfo'>
+                            <p>{data.product_name}</p>
+                        </div> */}
+                    </div>
+                })}
+            </div>
+            <div className='books__bookPagination'>
+                {/* PREVIOUS PAGE */}
+                <button disabled={pageNumber <= 0 ? true : false} onClick={() => setpageNumber(pageNumber - 1)}> &#8612;</button>
+                <span>{pageNumber + 1}</span>
+                {/* NEXT PAGE */}
+                <button disabled={Math.floor(booksListData / 60) < pageNumber ? true : false} onClick={() => setpageNumber(pageNumber + 1)}> &#8614;</button>
+            </div>
+        </div>
     )
 }