85 lines
No EOL
2.9 KiB
TypeScript
85 lines
No EOL
2.9 KiB
TypeScript
import styles from "./styles.module.scss"
|
||
import { Worship as WorshipType } from '@/payload-types'
|
||
import { useDate } from '@/hooks/useCompactDate'
|
||
import { Section } from '@/components/Section/Section'
|
||
import { Title } from '@/components/Title/Title'
|
||
import { liturgicalDayName } from '@/hooks/liturgicalDayName'
|
||
import { EventExcerpt, EventExcerptRow } from '@/components/EventExcerpt/EventExcerpt'
|
||
import { transformCategory } from '@/utils/dto/worship'
|
||
import { TextDiv } from '@/components/Text/TextDiv'
|
||
import { church } from '@/utils/church'
|
||
import { ChurchIcon } from '@/components/ChurchIcon/ChurchIcon'
|
||
import { Cross } from '@/components/Cross/Cross'
|
||
import { Testimony } from '@/components/Testimony/Testimony'
|
||
|
||
type WorshipPageProps = {
|
||
worship: WorshipType
|
||
}
|
||
|
||
export const Worship = ({ worship }: WorshipPageProps) => {
|
||
const date = new Date(worship.date);
|
||
const day = date.toLocaleDateString('de-DE', {weekday: 'long'} )
|
||
const localeDate = useDate(worship.date)
|
||
const liturgicalDay = worship.liturgicalDay ? worship.liturgicalDay : liturgicalDayName(worship.date);
|
||
const what = worship.title ? worship.title : transformCategory(worship.type);
|
||
const time = date.toLocaleTimeString("de-DE", { timeStyle: "short", timeZone: "Europe/Berlin" });
|
||
|
||
return (
|
||
<>
|
||
<Section>
|
||
<div className={styles.textCenter}>
|
||
<Cross schema={"contrast"} />
|
||
</div>
|
||
<Title
|
||
title={`${day}, ${localeDate}`}
|
||
size={'xl'}
|
||
color={'contrast'}
|
||
align={"center"}
|
||
/>
|
||
|
||
<p className={styles.liturgicalDay}>
|
||
{liturgicalDay}
|
||
</p>
|
||
</Section>
|
||
|
||
<Section padding={"medium"}>
|
||
<EventExcerpt>
|
||
<EventExcerptRow label={"Was:"}>
|
||
{what}
|
||
</EventExcerptRow>
|
||
<EventExcerptRow label={"Wo:"}>
|
||
{ typeof worship.location == "object" &&
|
||
<TextDiv text={`${worship.location.name}\n${worship.location.address}\n${time} Uhr`} />
|
||
}
|
||
</EventExcerptRow>
|
||
{ worship.celebrant &&
|
||
<EventExcerptRow label={"Zelebrant:"}>
|
||
{worship.celebrant}
|
||
</EventExcerptRow>
|
||
}
|
||
|
||
{ typeof worship.description === "string" && worship.description != "" &&
|
||
<EventExcerptRow label={"Hinweise:"}>
|
||
<TextDiv text={worship.description} />
|
||
</EventExcerptRow>
|
||
}
|
||
|
||
<div>
|
||
<div className={styles.church}>
|
||
<ChurchIcon
|
||
church={church(typeof worship.location == "object" ? worship.location.name : "clara")}
|
||
color={"#426156"}
|
||
style={"filled"}
|
||
stroke={3}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</EventExcerpt>
|
||
</Section>
|
||
|
||
<Section>
|
||
<Testimony testimony={"Du bringst nichts mit hinein, Du nimmst nichts mit hinaus
Lass eine goldene Spur zurück, Im alten Erdenhaus"} />
|
||
</Section>
|
||
</>
|
||
)
|
||
} |