From 0ef08442650f405c32069da073b9e3f07a7ccfee Mon Sep 17 00:00:00 2001
From: q9i <46249765+quantum9Innovation@users.noreply.github.com>
Date: Sun, 18 Feb 2024 21:20:24 -0800
Subject: [PATCH] feat: add DocumentCardWrapper component to display document
 cards on the Documents page

The DocumentCardWrapper component takes in a shortName parameter and renders a DocumentCard component for the corresponding document. If the document does not exist, a 404 page is displayed. The DocumentCardWrapper component is used in the Page component to render a grid of document cards.
---
 src/app/document/page.tsx | 46 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/app/document/page.tsx

diff --git a/src/app/document/page.tsx b/src/app/document/page.tsx
new file mode 100644
index 0000000..2423d49
--- /dev/null
+++ b/src/app/document/page.tsx
@@ -0,0 +1,46 @@
+import { documents } from '@/app/db/data'
+import { notFound } from 'next/navigation'
+import { Zilla_Slab } from 'next/font/google'
+import { Fragment } from 'react'
+import DocumentCard from '../components/DocumentCard'
+
+const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
+
+const DocumentCardWrapper = ({
+  params,
+}: Readonly<{ params: { shortName: string } }>) => {
+  const { shortName } = params
+  const doc = documents[shortName]
+  const href = `/document/view/${shortName}`
+  if (!doc) {
+    notFound()
+  }
+
+  return (
+    <DocumentCard doc={doc} href={href} />
+  )
+}
+
+const Page = () => {
+  return (
+    <div className='p-6'>
+      <h1 className={`${zillaSlab.className} text-6xl text-center mb-10`}>
+        Documents
+      </h1>
+      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
+        {Object.keys(documents).map((documentShortName) => {
+          return (
+            <Fragment key={documentShortName}>
+              <DocumentCardWrapper
+                key={documentShortName}
+                params={{ shortName: documentShortName }}
+              />
+            </Fragment>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default Page