fix: make all documents the same height in gallery view
This commit is contained in:
parent
3f4b6c1b9f
commit
83d81f3340
1 changed files with 32 additions and 2 deletions
|
@ -2,7 +2,11 @@ import { documents } from '@/app/db/data'
|
||||||
import { Zilla_Slab } from 'next/font/google'
|
import { Zilla_Slab } from 'next/font/google'
|
||||||
import { notFound } from 'next/navigation'
|
import { notFound } from 'next/navigation'
|
||||||
import { Fragment } from 'react'
|
import { Fragment } from 'react'
|
||||||
import DocumentCard from '../components/DocumentCard'
|
import Link from 'next/link'
|
||||||
|
import cardEffects from '@/app/styles/cardEffects.module.css'
|
||||||
|
import { Authors, Topics } from '../components/DataDisplay'
|
||||||
|
import { epoch2datestring } from '../utils/epoch2datestring'
|
||||||
|
import { ItemBadge, Status } from '../components/Badges'
|
||||||
|
|
||||||
const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
|
const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
|
||||||
|
|
||||||
|
@ -16,7 +20,33 @@ const DocumentCardWrapper = ({
|
||||||
notFound()
|
notFound()
|
||||||
}
|
}
|
||||||
|
|
||||||
return <DocumentCard doc={doc} href={href} />
|
const { manifest, abstract } = doc
|
||||||
|
const { title, authors, topics, dates, status, type } = manifest
|
||||||
|
return (
|
||||||
|
<Link href={href} className='no-link-style'>
|
||||||
|
<button
|
||||||
|
className={`${cardEffects['card-large']} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md text-left h-full flex flex-col`}
|
||||||
|
>
|
||||||
|
<h2 className={`${zillaSlab.className} text-3xl`}>{title}</h2>
|
||||||
|
<p className='text-slate-500 py-2 text-md mt-2'>
|
||||||
|
<Authors authors={authors} noLink />
|
||||||
|
</p>
|
||||||
|
<p className='mb-2 text-slate-700 text-md'>
|
||||||
|
Last updated on {epoch2datestring(dates[dates.length - 1])}
|
||||||
|
</p>
|
||||||
|
<p className='mb-2'>
|
||||||
|
<Topics topics={topics} showTitle />
|
||||||
|
</p>
|
||||||
|
<div className='mb-4 flex flex-wrap gap-2'>
|
||||||
|
<ItemBadge itemName={type} /> <Status statusName={status} />
|
||||||
|
</div>
|
||||||
|
<h2 className={`${zillaSlab.className} text-2xl`}>Abstract</h2>
|
||||||
|
<p className='py-2 text-md text-slate-700 font-serif text-lg text-balance'>
|
||||||
|
{abstract.substring(0, 500) + (abstract.length > 500 ? '...' : '')}
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const getDocumentDate = (id: string) => {
|
const getDocumentDate = (id: string) => {
|
||||||
|
|
Loading…
Reference in a new issue