0ef0844265
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.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
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
|