mirror of
https://github.com/supabase/supabase.git
synced 2026-06-20 16:26:02 +08:00
b91532f6c7
* migrate some www components to tokens * consolidate InteractiveShimmerCard to Panel component * update tokens in blog * update tokens in careers page * update tokens in customers section * update tokens in open-source section * update tokens in Realtime page * update tokens in Storage and Vector * update tokens in SplitCodeBlockCarousel * update tokens in PGCharts * remove unused css files * update tokens in Card * update tokens in Pricing page * clean up priving page imports * remove hardcoded theme vars * migrate first half of defaultTheme.ts to tokens * migrate second half of defaultTheme.ts to tokens * improve inputs * add foreground to text-light and text-lighter * add foreground to text-light and text-lighter * migrate docs components with styling tokens * migrate docs components with styling tokens * fix broken Repos component * fix broken classes in blog * update tokens on Button and other components * update tokens on IconPanel * update studio main layout base styling tokens * update tokens across studio, docs and www * update tokens across studio, docs and www * update ui/Panel to styling tokens * update ExampleProject and TableEditorMenu tokens * www vector page tokens * update studio UI tokens * update other studio UI tokens * update more studio UI tokens * change tokens here, change tokens there * finish updating colors with tokens variables * add gui sandbox for theme experimentation * use common package for www, docs and studio and fix Command K tokens * provide light mode default tokens options * fix conflict leftover * update loading line * fix className typo * fix prettier * update themeSandbox preset default values * fix text-background0 * prettier * update warningBanner with warning color * switch all border-border with border-default * improve border-secondary and foreground-muted in light mode * force ring color on toggle * fix button bg color and border-muted light token * fix input bg color * fix dark button hover * fix homepage product card * fix code-hike table header colors * button dark border * remove tabIndex leftover from homepage main ctas --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import Link from 'next/link'
|
|
import { IconArrowLeft, IconArrowRight } from 'ui'
|
|
|
|
const Pagination = ({ currentPage, totalCount }: { currentPage: number; totalCount: number }) => {
|
|
// TODO: not sure if this is the most efficient way to do this. may need to refactor.
|
|
const totalArray = Array.from({ length: totalCount }, (_, i: number) => i + 1)
|
|
const pages = totalArray.filter((page: number) => {
|
|
return page >= currentPage - 2 && page <= currentPage + 2
|
|
})
|
|
|
|
return (
|
|
<ul className="flex justify-center space-x-1 text-xs font-medium">
|
|
<li>
|
|
<Link
|
|
href={`/discussions?page=${currentPage - 1}`}
|
|
className="border border-control bg-surface-100 inline-flex h-8 w-8 items-center justify-center rounded"
|
|
>
|
|
<IconArrowLeft className="stroke-2 transition group-hover:-translate-x-1" height={12.5} />
|
|
</Link>
|
|
</li>
|
|
{pages.map((page: number, i: number) => {
|
|
i = i + 1
|
|
return (
|
|
<li key={i}>
|
|
<Link
|
|
href={`/discussions?page=${page}`}
|
|
className={`border-scale-600 inline-flex h-8 w-8 items-center justify-center rounded border ${
|
|
currentPage === page ? 'bg-brand' : 'bg-surface-100'
|
|
}`}
|
|
>
|
|
{page}
|
|
</Link>
|
|
</li>
|
|
)
|
|
})}
|
|
<li>
|
|
<Link
|
|
href={`/discussions?page=${currentPage + 1}`}
|
|
className="border-control bg-surface-100 inline-flex h-8 w-8 items-center justify-center rounded border"
|
|
>
|
|
<IconArrowRight
|
|
className="stroke-2 transition group-hover:-translate-x-1"
|
|
height={12.5}
|
|
/>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default Pagination
|