Skip to content

Commit 466d659

Browse files
vsumit89vsumit89
authored
Merge pull request github#2 from factly/history-page
history page added
2 parents d492313 + ff4a1b9 commit 466d659

4 files changed

Lines changed: 130 additions & 1 deletion

File tree

‎web/src/components/pagination/Pagination.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useState, useEffect } from "react";
2+
import {AiOutlineArrowLeft, AiOutlineArrowRight} from "react-icons/ai"
3+
4+
5+
const Pagination = ({ data, itemsPerPage }) => {
6+
const [currentPage, setCurrentPage] = useState(1);
7+
const [totalPages, setTotalPages] = useState(1);
8+
9+
useEffect(() => {
10+
setTotalPages(Math.ceil(data.length / itemsPerPage));
11+
}, [data, itemsPerPage]);
12+
13+
const handleClick = (event, page) => {
14+
event.preventDefault();
15+
setCurrentPage(page);
16+
};
17+
18+
const renderPageNumbers = () => {
19+
const pageNumbers = [];
20+
21+
for (let i = 1; i <= totalPages; i++) {
22+
pageNumbers.push(
23+
<button className={currentPage===i ? "border not-italic font-semibold leading-5 px-[15px] py-2.5 border-solid border-[#D0D5DD] border-collapse bg-[#F9FAFB] " : "border not-italic font-semibold leading-5 px-[15px] py-2.5 border-solid border-[#D0D5DD] border-collapse" }>{i}</button>
24+
);
25+
}
26+
27+
return pageNumbers;
28+
};
29+
30+
return (
31+
<div className="flex items-center flex-row px-[2%] py-[1%] justify-end">
32+
<div className="flex justify-evenly items-center flex-row border rounded-[10px] border-solid border-[#D0D5DD] border-collapse">
33+
<button className="not-italic font-semibold leading-5 px-5 py-2.5">
34+
<AiOutlineArrowLeft />
35+
</button>
36+
<ul>{renderPageNumbers()}</ul>
37+
<button className="not-italic font-semibold leading-5 px-5 py-2.5">
38+
<AiOutlineArrowRight />
39+
</button>
40+
</div>
41+
</div>
42+
);
43+
};
44+
export default Pagination;

‎web/src/pages/history/content.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
import {BiDotsVerticalRounded} from 'react-icons/bi';
3+
const Content = () => {
4+
return (
5+
<div className="box-border flex flex-col justify-center items-start gap-4 isolate w-full border flex-none order-none grow-0 px-[26px] py-[22px] rounded-lg border-solid border-[#F3F3F3]">
6+
<div className="flex flex-col items-start gap-3 w-full flex-none order-none grow-0 z-0 p-0">
7+
<div className="flex flex-row items-center gap-1.5 justify-between w-full flex-none order-none grow-0 p-0">
8+
<div className="flex justify-between items-center flex-row">
9+
<div className='w-[136.77px] not-italic font-medium text-[13px] leading-[19px] text-[#6C6C6C] flex-none order-none grow-0'>By Ayushi Verma</div>
10+
<div className=' w-[73.25px] not-italic font-medium text-[11px] leading-[17px] text-[#B3B3B3] flex-none order-1 grow-0'>16m ago</div>
11+
</div>
12+
<div classname='w-full flex items-center flex-row justify-end'><BiDotsVerticalRounded/></div>
13+
</div>
14+
<div className="w-full not-italic font-medium text-xs leading-5 text-[#1E1E1E] flex-none order-1 grow-0">
15+
Once upon a time there was a blogger who wanted to make their voice heard. After months of hard work and dedication, they had finally managed to create a blog that people could read and appreciate.Soon enough they got word back that they had been accepted! The blogger was overjoyed and couldn't wait to start writing for this amazing publication...
16+
</div>
17+
</div>
18+
</div>
19+
)
20+
}
21+
22+
export default Content

‎web/src/pages/history/history.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from "react";
2+
import Search from "../../components/search";
3+
4+
import Content from "./content";
5+
import Pagination from "../../components/pagination/Pagination";
6+
import { icons } from "react-icons";
7+
import {AiOutlineArrowLeft, AiOutlineArrowRight} from "react-icons/ai"
8+
const History = () => {
9+
const data=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
10+
const itemsPerPage=4;
11+
return (
12+
<>
13+
<div className="w-[83.33%] h-screen fixed px-[2%] py-[1%] right-0 top-0">
14+
<div className="flex justify-between flex-row m-2.5">
15+
<div className="w-6/12">
16+
<div className="not-italic font-semibold text-[25px] leading-9 text-[#1E1E1E]">History</div>
17+
</div>
18+
<div className=" w-6/12 flex flex-row justify-end">
19+
<Search/>
20+
</div>
21+
</div>
22+
23+
<div className="w-full flex items-center flex-row mt-2.5 rounded-lg border-b-[#F3F3F3] border-b border-solid justify-start">
24+
<div className="not-italic font-semibold text-xs leading-5 px-5 py-2.5 text-[#1E1E1E] border-b-2 border-b-[#1E1E1E] border-solid;">
25+
<div className="cursor-pointer">Text</div>
26+
</div>
27+
28+
<div className="not-italic font-semibold text-xs leading-5 text-[#667085] px-5 py-2.5">
29+
<div className="cursor-pointer">Image</div>
30+
</div>
31+
32+
<div className="not-italic font-semibold text-xs leading-5 text-[#667085] px-5 py-2.5">
33+
<div className="cursor-pointer">Document</div>
34+
</div>
35+
</div>
36+
37+
<div className="mt-2.5 p-[0.5%];">
38+
<div className="mt-2.5">
39+
<Content/>
40+
</div>
41+
<div className="mt-2.5">
42+
<Content/>
43+
</div>
44+
<div className="mt-2.5">
45+
<Content/>
46+
</div>
47+
<div className="mt-2.5">
48+
<Content/>
49+
</div>
50+
</div>
51+
52+
<Pagination data={data} itemsPerPage={itemsPerPage} />
53+
54+
</div>
55+
</>
56+
);
57+
};
58+
59+
export default History;

‎web/src/routes/index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ChatPage from "../pages/chats/dashboard";
44
import DocumentPage from "../pages/documents";
55
import Document from "../pages/documents/create";
66
import ImagePage from "../pages/images";
7-
7+
import History from "../pages/history/history";
88
export const routes = [
99
{
1010
path: "/",
@@ -26,6 +26,10 @@ export const routes = [
2626
path: "/images",
2727
element: <ImagePage />,
2828
},
29+
{
30+
path: "/history",
31+
element: <History />,
32+
},
2933
],
3034
},
3135
{

0 commit comments

Comments
 (0)