fix: make all documents the same height in gallery view

This commit is contained in:
Team 1280 Programming 2024-02-20 15:45:23 -08:00 committed by Team 1280 Programming Laptop
parent 3f4b6c1b9f
commit 83d81f3340

View file

@ -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) => {