/
RepoMain.jsx
90 lines (83 loc) · 3.13 KB
/
RepoMain.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { useState } from "react";
import { IoIosArrowForward, IoIosArrowBack } from "react-icons/io";
import RepoCard from "./RepoCard";
import RepoForm from "./RepoForm";
const RepoMain = ({ data }) => {
const [page, setPage] = useState(1);
const [value, setValue] = useState("");
const reposPerPage = 8;
let repos = data;
const start = (page - 1) * reposPerPage;
const end = page * reposPerPage;
const pageLength = Math.ceil(repos.length / reposPerPage);
const filteredRepo = repos.filter((repo) =>
repo.name.toLowerCase().includes(value.toLowerCase())
);
return (
<>
<main className='md:col-span-2'>
<RepoForm value={value} setValue={setValue} />
<ul className='text-repoColor dark:text-[#d9cccc]'>
{filteredRepo.slice(start, end).map((repo) => {
return <RepoCard key={repo.id} repo={repo} />;
})}
</ul>
<div
className={`flex flex-col items-start gap-y-3 md:flex-row justify-between md:items-center py-8 border-t border-grey-100 dark:border-neutral-400 ${
value ? "hidden" : ""
}`}
>
<div className={`flex items-center gap-x-2`}>
<button
className='flex items-center gap-x-1 text-sky-500 disabled:text-neutral-400 disabled:cursor-not-allowed dark:disabled:text-neutral-700'
disabled={page <= 1}
onClick={() => setPage((p) => p - 1)}
>
<IoIosArrowBack
className={`fill-sky-500 mb-0.5 ${
page <= 1 ? "fill-neutral-400 dark:fill-neutral-700" : ""
}`}
/>
<span className='mb-1 text-sm md:text-base'>Previous</span>
</button>
<div className='space-x-2'>
{Array.from({ length: pageLength }, (_, i) => i + 1).map(
(btn) => (
<button
key={`${btn}-i`}
className={`${
page === btn
? "bg-gitGreen text-neutral-50"
: "bg-neutral-200 dark:bg-neutral-700"
} px-3 transition-colors duration-300`}
onClick={() => setPage(btn)}
>
{btn}
</button>
)
)}
</div>
<button
className='flex items-center gap-x-1 text-sky-500 disabled:text-neutral-400 disabled:cursor-not-allowed dark:disabled:text-neutral-700'
disabled={page >= pageLength}
onClick={() => setPage((p) => p + 1)}
>
<span className='mb-1 text-sm md:text-base '>Next</span>
<IoIosArrowForward
className={`fill-sky-500 mb-0.5 ${
page >= Math.ceil(repos.length / reposPerPage)
? "fill-neutral-400 dark:fill-neutral-700"
: ""
}`}
/>
</button>
</div>
<p className='mb-[7px]'>
Page {page} of {pageLength}
</p>
</div>
</main>
</>
);
};
export default RepoMain;