40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { ResumeCard } from '@/components/resume-card'
|
|
import BlurFade from '@/components/ui/blur-fade'
|
|
import { Media, SimpleListBlock } from '@/payload-types'
|
|
import { DefaultTypedEditorState } from '@payloadcms/richtext-lexical'
|
|
|
|
const BLUR_FADE_DELAY = 0.04
|
|
|
|
type Props = {
|
|
className: string
|
|
} & SimpleListBlock
|
|
export const SimpleList = (props: Props) => {
|
|
return (
|
|
<section id="work">
|
|
<div className="flex min-h-0 flex-col gap-y-3">
|
|
<BlurFade delay={BLUR_FADE_DELAY * 5}>
|
|
<h2 className="text-xl font-bold">{props.listHeader}</h2>
|
|
</BlurFade>
|
|
{props.lineItems?.map((item, id) => {
|
|
const avatar = item.avatar as Media | undefined
|
|
|
|
return (
|
|
<BlurFade key={item.title || '' + id} delay={BLUR_FADE_DELAY * 6 + id * 0.05}>
|
|
<ResumeCard
|
|
logoUrl={avatar?.url || ''}
|
|
altText={avatar?.alt || ''}
|
|
title={item.title || ''}
|
|
subtitle={item.subtitle || ''}
|
|
href={item.link || ''}
|
|
badges={[]}
|
|
period={item.extraDetail || ''}
|
|
description={item.description as DefaultTypedEditorState}
|
|
/>
|
|
</BlurFade>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|