external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: migrate pagination styles from VE to SCSS + BEM

Browse source
This commit is contained in:
Hachi-R 2025-01-19 13:49:21 -03:00
parent b855abbab0
commit 2e38419e8a
2 changed files with 32 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/renderer/src/pages/catalogue/pagination.scss Normal file
View file

@ -0,0 +1,21 @@
.pagination {
display: flex;
gap: 4px;
&__button {
width: 40px;
max-width: 40px;
max-height: 40px;
}
&__ellipsis {
width: 40px;
display: flex;
justify-content: center;
align-items: center;
&-text {
font-size: 16px;
}
}
}

40
src/renderer/src/pages/catalogue/pagination.tsx
View file

@ -1,6 +1,7 @@
import { Button } from "@renderer/components/button/button"; import { Button } from "@renderer/components/button/button";
import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react"; import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
import { useFormat } from "@renderer/hooks/use-format"; import { useFormat } from "@renderer/hooks/use-format";
import "./pagination.scss";
interface PaginationProps { interface PaginationProps {
page: number; page: number;
@ -31,17 +32,12 @@ export function Pagination({
} }
return ( return (
<div <div className="pagination">
style={{
display: "flex",
gap: 4,
}}
>
{/* Previous Button */} {/* Previous Button */}
<Button <Button
theme="outline" theme="outline"
onClick={() => onPageChange(page - 1)} onClick={() => onPageChange(page - 1)}
style={{ width: 40, maxWidth: 40, maxHeight: 40 }} className="pagination__button"
disabled={page === 1} disabled={page === 1}
> >
<ChevronLeftIcon /> <ChevronLeftIcon />
@ -53,22 +49,15 @@ export function Pagination({
<Button <Button
theme="outline" theme="outline"
onClick={() => onPageChange(1)} onClick={() => onPageChange(1)}
style={{ width: 40, maxWidth: 40, maxHeight: 40 }} className="pagination__button"
disabled={page === 1} disabled={page === 1}
> >
{1} {1}
</Button> </Button>
{/* ellipsis */} {/* ellipsis */}
<div <div className="pagination__ellipsis">
style={{ <span className="pagination__ellipsis-text">...</span>
width: 40,
justifyContent: "center",
display: "flex",
alignItems: "center",
}}
>
<span style={{ fontSize: 16 }}>...</span>
</div> </div>
</> </>
)} )}
@ -81,7 +70,7 @@ export function Pagination({
<Button <Button
theme={page === pageNumber ? "primary" : "outline"} theme={page === pageNumber ? "primary" : "outline"}
key={pageNumber} key={pageNumber}
style={{ width: 40, maxWidth: 40, maxHeight: 40 }} className="pagination__button"
onClick={() => onPageChange(pageNumber)} onClick={() => onPageChange(pageNumber)}
> >
{formatNumber(pageNumber)} {formatNumber(pageNumber)}
@ -91,22 +80,15 @@ export function Pagination({
{page < totalPages - 1 && ( {page < totalPages - 1 && (
<> <>
{/* ellipsis */} {/* ellipsis */}
<div <div className="pagination__ellipsis">
style={{ <span className="pagination__ellipsis-text">...</span>
width: 40,
justifyContent: "center",
display: "flex",
alignItems: "center",
}}
>
<span style={{ fontSize: 16 }}>...</span>
</div> </div>
{/* last page */} {/* last page */}
<Button <Button
theme="outline" theme="outline"
onClick={() => onPageChange(totalPages)} onClick={() => onPageChange(totalPages)}
style={{ width: 40, maxWidth: 40, maxHeight: 40 }} className="pagination__button"
disabled={page === totalPages} disabled={page === totalPages}
> >
{formatNumber(totalPages)} {formatNumber(totalPages)}
@ -118,7 +100,7 @@ export function Pagination({
<Button <Button
theme="outline" theme="outline"
onClick={() => onPageChange(page + 1)} onClick={() => onPageChange(page + 1)}
style={{ width: 40, maxWidth: 40, maxHeight: 40 }} className="pagination__button"
disabled={page === totalPages} disabled={page === totalPages}
> >
<ChevronRightIcon /> <ChevronRightIcon />