74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
import { Link } from '@chakra-ui/next-js'
|
|
import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid, Text, Skeleton } from '@chakra-ui/react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import { useRouter } from 'next/router'
|
|
import Pagination from '~/components/pagination'
|
|
|
|
const PER_PAGE = 12
|
|
|
|
export default function VendorsPage() {
|
|
const router = useRouter()
|
|
const {
|
|
query: { page = 1 },
|
|
} = router
|
|
|
|
const { data, isFetching } = useQuery({
|
|
queryKey: ['vendors', page],
|
|
queryFn: async (...props2) => {
|
|
await new Promise((r) => setTimeout(r, 2000))
|
|
|
|
const res = await fetch(
|
|
`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors?fields[]=*&limit=12&page=${page}&meta[]=filter_count&sort=name`
|
|
)
|
|
if (!res.ok) {
|
|
throw new Error('wrong')
|
|
}
|
|
|
|
return res.json()
|
|
},
|
|
keepPreviousData: true,
|
|
cacheTime: 1000 * 60 * 30,
|
|
staleTime: 1000 * 60 * 30,
|
|
})
|
|
|
|
const { meta, data: vendors } = data || { meta: {}, data: [] }
|
|
|
|
return (
|
|
<div>
|
|
<Heading size="lg" my={8}>
|
|
Vendors
|
|
</Heading>
|
|
|
|
<SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
|
|
{isFetching &&
|
|
new Array(PER_PAGE).fill(true).map((v, k) => (
|
|
<Card key={k}>
|
|
<Skeleton h="40" />
|
|
<CardBody>
|
|
<Skeleton h="4" />
|
|
</CardBody>
|
|
</Card>
|
|
))}
|
|
{!isFetching &&
|
|
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={v.name}
|
|
/>
|
|
<CardBody>
|
|
<LinkOverlay as={Link} href={`/vendors/${v.slug}`} prefetch={false}>
|
|
{v.name}
|
|
</LinkOverlay>
|
|
</CardBody>
|
|
</LinkBox>
|
|
))}
|
|
</SimpleGrid>
|
|
|
|
<Pagination page={Number(page)} itemsPerPage={PER_PAGE} totalItems={meta.filter_count} />
|
|
</div>
|
|
)
|
|
}
|