40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import usePagination from '@/hooks/use-pagination.ts'
|
|
import { createLazyFileRoute } from '@tanstack/react-router'
|
|
|
|
import useServersSWR from '@/api/servers/use-servers-swr.ts'
|
|
|
|
import ServerCard from '@/components/interfaces/Client/Dashboard/ServerCard.tsx'
|
|
|
|
import LengthAwarePaginator from '@/components/ui/Pagination/LengthAwarePaginator.tsx'
|
|
import { Heading } from '@/components/ui/Typography'
|
|
|
|
|
|
export const Route = createLazyFileRoute('/_app/_dashboard/')({
|
|
component: Dashboard,
|
|
})
|
|
|
|
function Dashboard() {
|
|
const { page, setPage } = usePagination()
|
|
const { data } = useServersSWR(page)
|
|
|
|
return (
|
|
<>
|
|
<Heading>My Servers</Heading>
|
|
<LengthAwarePaginator
|
|
page={page}
|
|
data={data}
|
|
onPageChange={setPage}
|
|
>
|
|
{({ items }) => (
|
|
<ul className={'space-y-3'}>
|
|
{items.map(server => (
|
|
<li key={server.id}>
|
|
<ServerCard key={server.id} server={server} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</LengthAwarePaginator>
|
|
</>
|
|
)
|
|
}
|