109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
import {
|
|
Pagination,
|
|
PaginationContainer,
|
|
PaginationNext,
|
|
PaginationPage,
|
|
PaginationPageGroup,
|
|
PaginationPrevious,
|
|
usePagination,
|
|
} from '@ajna/pagination'
|
|
import { Link } from '@chakra-ui/next-js'
|
|
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid, Text } from '@chakra-ui/react'
|
|
import { useRouter } from 'next/navigation'
|
|
import directus from '~/lib/directus'
|
|
|
|
const PER_PAGE = 12
|
|
|
|
export const getServerSideProps = async ({ query }) => {
|
|
const page = query?.page || 1
|
|
const sort = query?.sort || 'name'
|
|
|
|
const { data: vendors, meta } = await directus.items('vendors').readByQuery({
|
|
fields: [
|
|
//
|
|
'*',
|
|
],
|
|
limit: PER_PAGE,
|
|
page,
|
|
meta: ['filter_count'],
|
|
sort,
|
|
})
|
|
return { props: { vendors, meta, page } }
|
|
}
|
|
|
|
export default function VendorsPage({ vendors, meta, page }) {
|
|
const router = useRouter()
|
|
|
|
const { pages, pagesCount, currentPage, setCurrentPage, isDisabled } = usePagination({
|
|
total: meta.filter_count,
|
|
limits: {
|
|
outer: 1,
|
|
inner: 1,
|
|
},
|
|
initialState: {
|
|
pageSize: PER_PAGE,
|
|
isDisabled: false,
|
|
currentPage: page,
|
|
},
|
|
})
|
|
|
|
const handlePageChange = (nextPage) => {
|
|
setCurrentPage(nextPage)
|
|
router.replace(`?page=${nextPage}`)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Heading size="lg" my={8}>
|
|
Vendors
|
|
</Heading>
|
|
<SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
|
|
{vendors.map((v) => (
|
|
<LinkBox as={Card} rounded={4} key={v.id}>
|
|
<Image
|
|
roundedTop={4}
|
|
objectFit="cover"
|
|
src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=250&q=80"
|
|
alt="Chakra UI"
|
|
/>
|
|
<CardBody>
|
|
<LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
|
|
{v.name}
|
|
</LinkOverlay>
|
|
</CardBody>
|
|
</LinkBox>
|
|
))}
|
|
</SimpleGrid>
|
|
|
|
<Pagination
|
|
pagesCount={pagesCount}
|
|
currentPage={currentPage}
|
|
isDisabled={isDisabled}
|
|
onPageChange={handlePageChange}
|
|
>
|
|
<PaginationContainer align="center" my={4} w={'full'} justifyContent={'space-between'}>
|
|
<PaginationPrevious>
|
|
<Text>«</Text>
|
|
</PaginationPrevious>
|
|
<PaginationPageGroup align="center" mx={4}>
|
|
{pages.map((page) => (
|
|
<PaginationPage
|
|
w={10}
|
|
key={`pagination_page_${page}`}
|
|
page={page}
|
|
fontSize="sm"
|
|
_current={{
|
|
bg: 'gray.400',
|
|
}}
|
|
/>
|
|
))}
|
|
</PaginationPageGroup>
|
|
<PaginationNext>
|
|
<Text>»</Text>
|
|
</PaginationNext>
|
|
</PaginationContainer>
|
|
</Pagination>
|
|
</div>
|
|
)
|
|
}
|