132 lines
No EOL
4.3 KiB
TypeScript
132 lines
No EOL
4.3 KiB
TypeScript
import { Parish } from '@/payload-types'
|
|
import { Container } from '@/components/Container/Container'
|
|
import { HTMLText } from '@/components/Text/HTMLText'
|
|
import { Section } from '@/components/Section/Section'
|
|
import { Button } from '@/components/Button/Button'
|
|
import { DonationForm } from '@/components/DonationForm/DonationForm'
|
|
import { YoutubePlayer } from '@/components/YoutubePlayer/YoutubePlayer'
|
|
import { DonationAppeal } from '@/components/DonationAppeal/DonationAppeal'
|
|
import { ImageCardsBlock } from '@/compositions/Blocks/ImageCardsBlock'
|
|
import { Title } from '@/components/Title/Title'
|
|
import { Collapsible } from '@/components/Collapsible/Collapsible'
|
|
import { NextPrevButtons } from '@/components/NextPrevButtons/NextPrevButtons'
|
|
|
|
type BlocksProps = {
|
|
content: Parish['content']
|
|
}
|
|
|
|
export function ParishBlocks({ content }: BlocksProps) {
|
|
|
|
if (!content) return null;
|
|
|
|
// determine if some margin at the bottom should be added
|
|
const length = content.length;
|
|
const shouldAddMargin = content[length - 1].blockType === "text"
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
{content.map(item => {
|
|
if (item.blockType === "text") {
|
|
return (
|
|
<Container key={item.id}>
|
|
<HTMLText width={item.width} data={item.content} />
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
if (item.blockType === "document" && typeof item.file === "object") {
|
|
return (
|
|
<Container key={item.id}>
|
|
<Section padding={"medium"}>
|
|
<Button
|
|
size={"lg"}
|
|
href={item.file.url || "notfound"}
|
|
schema={"contrast"}
|
|
target={"_blank"}
|
|
>
|
|
{item.button}
|
|
</Button>
|
|
</Section>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
if (item.blockType === "donation") {
|
|
return <Section key={item.id} padding={"small"} paddingBottom={"large"}>
|
|
<DonationForm />
|
|
</Section>
|
|
}
|
|
|
|
if (item.blockType === "youtube") {
|
|
return <Section key={item.id} padding={"small"}>
|
|
<Container>
|
|
<YoutubePlayer id={item.youtube_id} />
|
|
</Container>
|
|
</Section>
|
|
}
|
|
|
|
if (item.blockType === "imageCards") {
|
|
return <ImageCardsBlock key={item.id} items={item.items} />
|
|
}
|
|
|
|
if (item.blockType === "title") {
|
|
return (
|
|
<Container key={item.id}>
|
|
<Title
|
|
title={item.title}
|
|
subtitle={item.subtitle || undefined}
|
|
size={item.size as 'xl' | 'lg' | 'md' | 'sm' | undefined}
|
|
align={item.align as 'left' | 'center' | undefined}
|
|
color={item.color as 'base' | 'shade1' | 'shade2' | 'shade3' | 'contrast' | 'contrastShade1' | undefined}
|
|
/>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
if (item.blockType === "collapsibles") {
|
|
return (
|
|
<Section key={item.id} padding={"small"}>
|
|
<Container>
|
|
{item.items.map(entry => (
|
|
<Collapsible key={entry.id} title={entry.title}>
|
|
<HTMLText width={"3/4"} data={entry.content} />
|
|
</Collapsible>
|
|
))}
|
|
</Container>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
if (item.blockType === "donationAppeal") {
|
|
return <Section key={item.id} padding={"small"}>
|
|
<Container>
|
|
<DonationAppeal />
|
|
</Container>
|
|
</Section>
|
|
}
|
|
|
|
if (item.blockType === 'nextPrevButtons') {
|
|
const prev = item.prev?.href && item.prev?.text
|
|
? { href: item.prev.href, text: item.prev.text }
|
|
: undefined
|
|
const next = item.next?.href && item.next?.text
|
|
? { href: item.next.href, text: item.next.text }
|
|
: undefined
|
|
return (
|
|
<Section key={item.id} padding={'medium'} paddingBottom={'small'}>
|
|
<NextPrevButtons prev={prev} next={next} />
|
|
</Section>
|
|
)
|
|
}
|
|
})}
|
|
</div>
|
|
|
|
|
|
|
|
{ shouldAddMargin &&
|
|
<Section></Section>
|
|
}
|
|
</>
|
|
)
|
|
} |