mirror of
https://github.com/supabase/supabase.git
synced 2026-06-20 22:06:04 +08:00
05a542ccea
* Add lucide-react to docs (to make the autocomplete work). * Migrate the docs app icons. * Migrate the ui-patterns. * Remove the old icons from ui package. * Migrate the www app from react-feather icons. * Migrate all of studio icons. * Migrate the only component in design-system. * Fix an old import in ui package. Revert an import in docs app. * Fix some pages in www. * Remove unneeded files used in generation of icons. * Fix a prettier error. * Fix more issues in www. * Fix an issue in Log Date picker. * Replace all string sizes with number sizes because the icons grew in some cases. * Fix more imports in security page. * Fix an extra import. * Remove the size prop from all icons if they're in a button and they match the button size. * Minor fixes for docs and www. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { ArrowLeft, ArrowRight } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
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"
|
|
>
|
|
<ArrowLeft 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"
|
|
>
|
|
<ArrowRight className="stroke-2 transition group-hover:-translate-x-1" height={12.5} />
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default Pagination
|