WIP: app -> pages

2023-06-14 22:25:00 +04:00
parent a4bed55547
commit d7ed76ae6e
14 changed files with 109 additions and 82 deletions
--- a/frontend/pages/vendors/page.js
+++ b/frontend/pages/vendors/page.js
@@ -0,0 +1,46 @@
+import { Link } from '@chakra-ui/next-js'
+import { Card, CardBody, Heading, Image, LinkBox, LinkOverlay, SimpleGrid } from '@chakra-ui/react'
+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>
+  )
+}