46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import { Card, CardBody, Heading, Image, Link, LinkBox, LinkOverlay, SimpleGrid } from '~/app/ui'
|
|
import directus from '~/lib/directus'
|
|
|
|
const PER_PAGE = 50
|
|
|
|
async function getVendors(page = 1) {
|
|
return directus.items('vendors').readByQuery({
|
|
fields: [
|
|
//
|
|
'*',
|
|
],
|
|
limit: PER_PAGE,
|
|
page,
|
|
meta: ['filter_count'],
|
|
})
|
|
}
|
|
|
|
export default async function VendorsPage({ params }) {
|
|
const { data: vendors, meta } = await getVendors()
|
|
|
|
return (
|
|
<div>
|
|
<Heading size="lg" my={8}>
|
|
Vendors <small>({meta.filter_count} total)</small>
|
|
</Heading>
|
|
<SimpleGrid columns={[1, 2, 3, 4]} spacing={3}>
|
|
{vendors.map((v) => (
|
|
<LinkBox as={Card} rounded={4}>
|
|
<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>
|
|
</div>
|
|
)
|
|
}
|