forked from Transparency/kgroad-frontend2
made filters in rating section
This commit is contained in:
Alibek committed
1 parent
a12aaa1213
commit
d4c49a1061
9 files changed
+139
-86
No files matched your search
@@ -1,40 +0,0 @@
|
||||
.pagination {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgb(208, 213, 221);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
&__prev {
|
||||
border-radius: 8px 0px 0px 8px;
|
||||
}
|
||||
|
||||
&__next {
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
}
|
||||
|
||||
&__page,
|
||||
&__page_active {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: rgb(52, 64, 84);
|
||||
}
|
||||
|
||||
&__page_active {
|
||||
background-color: rgb(249, 250, 251) !important;
|
||||
}
|
||||
|
||||
&__page:hover,
|
||||
&__prev:hover,
|
||||
&__next:hover {
|
||||
background-color: rgb(249, 250, 251);
|
||||
}
|
||||
}
|
||||
@@ -1,140 +0,0 @@
|
||||
import "./Pagination.scss";
|
||||
import arrow_right from "./icons/arrow-right.svg";
|
||||
import arrow_left from "./icons/arrow-left.svg";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
|
||||
interface IPaginationProps {
|
||||
setActivePage: (page: number | ((prev: number) => number)) => void;
|
||||
activePage: number;
|
||||
prev: string | null;
|
||||
next: string | null;
|
||||
count: number;
|
||||
current_count: number;
|
||||
}
|
||||
|
||||
const Pagination: React.FC<IPaginationProps> = ({
|
||||
setActivePage,
|
||||
activePage,
|
||||
prev,
|
||||
next,
|
||||
count,
|
||||
current_count,
|
||||
}: IPaginationProps) => {
|
||||
const pages_count = count % 8;
|
||||
const showPages = () => {
|
||||
const btns = [];
|
||||
|
||||
for (let i = 1; i <= pages_count; i++) {
|
||||
btns.push(
|
||||
<button
|
||||
onClick={() => setActivePage(i)}
|
||||
key={i}
|
||||
className={
|
||||
activePage === i
|
||||
? "pagination__page_active"
|
||||
: "pagination__page"
|
||||
}
|
||||
>
|
||||
{i}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (current_count < 8 && activePage === 1) {
|
||||
return [...btns.slice(0, 1)];
|
||||
}
|
||||
|
||||
if (pages_count > 5) {
|
||||
if (activePage > 2) {
|
||||
if (
|
||||
activePage + 2 === pages_count - 1 ||
|
||||
activePage + 1 === pages_count - 1 ||
|
||||
activePage === pages_count - 1 ||
|
||||
activePage === pages_count
|
||||
) {
|
||||
const newBtns = [
|
||||
...btns.slice(0, 1),
|
||||
<button key="..." disabled>
|
||||
...
|
||||
</button>,
|
||||
...btns.slice(
|
||||
activePage -
|
||||
(activePage + 2 === pages_count - 1 ? 2 : 1)
|
||||
),
|
||||
];
|
||||
|
||||
if (newBtns.length < 6) {
|
||||
return [
|
||||
...btns.slice(0, 1),
|
||||
<button key="..." disabled>
|
||||
...
|
||||
</button>,
|
||||
...btns.slice(-4),
|
||||
];
|
||||
}
|
||||
|
||||
return newBtns;
|
||||
} else {
|
||||
return [
|
||||
...btns.slice(0, 1),
|
||||
<button key="...1" disabled>
|
||||
...
|
||||
</button>,
|
||||
|
||||
...btns.slice(
|
||||
activePage - (activePage === 3 ? 1 : 2),
|
||||
activePage + 1
|
||||
),
|
||||
|
||||
<button key="..." disabled>
|
||||
...
|
||||
</button>,
|
||||
...btns.slice(-2),
|
||||
];
|
||||
}
|
||||
} else {
|
||||
return [
|
||||
...btns.slice(0, 3),
|
||||
<button key="..." disabled>
|
||||
...
|
||||
</button>,
|
||||
...btns.slice(-2),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
return btns;
|
||||
};
|
||||
|
||||
const prevPage = () => {
|
||||
if (activePage - 1 === 0) return;
|
||||
setActivePage((prev) => prev - 1);
|
||||
};
|
||||
|
||||
const nextPage = () => {
|
||||
if (activePage + 1 > pages_count) return;
|
||||
setActivePage((prev) => prev + 1);
|
||||
};
|
||||
return (
|
||||
<div className="pagination">
|
||||
<button
|
||||
onClick={prevPage}
|
||||
disabled={prev === null}
|
||||
className="pagination__prev"
|
||||
>
|
||||
<Image src={arrow_left} alt="" />
|
||||
</button>
|
||||
{showPages().map((btn) => btn)}
|
||||
<button
|
||||
onClick={nextPage}
|
||||
disabled={next === null}
|
||||
className="pagination__next"
|
||||
>
|
||||
<Image src={arrow_right} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pagination;
|
||||
@@ -1,7 +0,0 @@
|
||||
<svg width="13.336426" height="13.343750" viewBox="0 0 13.3364 13.3438" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path id="Icon" d="M12.5015 6.67188L0.834961 6.67188M6.66846 12.5059L0.834961 6.67188L6.66846 0.838867" stroke="#344054" stroke-opacity="1.000000" stroke-width="1.670000" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 417 B |
@@ -1,7 +0,0 @@
|
||||
<svg width="13.336426" height="13.343750" viewBox="0 0 13.3364 13.3438" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>
|
||||
Created with Pixso.
|
||||
</desc>
|
||||
<defs/>
|
||||
<path id="Icon" d="M0.834961 6.67188L12.5015 6.67188M6.66846 0.838867L12.5015 6.67188L6.66846 12.5059" stroke="#344054" stroke-opacity="1.000000" stroke-width="1.670000" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 416 B |
Reference in new issue
Block a user