church-website/src/app/(home)/gruppe/[slug]/page.tsx
2026-04-10 11:39:30 +02:00

100 lines
No EOL
2.7 KiB
TypeScript

import styles from "./styles.module.scss"
import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
import { fetchGroup } from '@/fetch/group'
import { notFound } from 'next/navigation'
import { Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
import { Container } from '@/components/Container/Container'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { TextDiv } from '@/components/Text/TextDiv'
import { Col } from '@/components/Flex/Col'
import { Row } from '@/components/Flex/Row'
import { Blocks } from '@/compositions/Blocks/Blocks'
import { getPhoto } from '@/utils/dto/gallery'
import { isAuthenticated } from '@/utils/auth'
import { AdminMenu } from '@/components/AdminMenu/AdminMenu'
import { GroupEvents } from '@/compositions/GroupEvents/GroupEvents'
import { RichText } from '@/components/Text/RichText'
import { RefreshRouteOnSave } from '@/components/RefreshRouteOnSave/RefreshRouteOnSave'
import { draftMode } from 'next/headers'
export default async function GroupPage({ params }: { params: Promise<{slug: string}>}) {
const slug = (await params).slug
const { isEnabled: isDraft } = await draftMode()
const group = await fetchGroup(slug, isDraft)
if(!group) {
notFound();
}
const authenticated = await isAuthenticated();
if(!authenticated && group._status !== "published") {
notFound();
}
const {id, shortDescription, photo, name, content, text } = group
const media = getPhoto("tablet", photo)
return (
<>
{isDraft && <RefreshRouteOnSave />}
{ media &&
<ImageWithText
title={name}
backgroundColor={"soft"}
text={shortDescription}
image={media}
schema={"contrast"}
/>
}
{typeof photo !== "object" &&
<Section paddingBottom={"medium"}>
<Container>
<Title title={name} />
<TextDiv text={shortDescription} />
</Container>
<HR />
</Section>
}
<Section paddingBottom={"small"}>
<Container>
<Row>
<Col>
<div className={styles.content}>
{ text &&
<RichText data={text} />
}
</div>
</Col>
<Col>
<GroupEvents id={id} />
</Col>
</Row>
</Container>
</Section>
{ content && content.length > 0 &&
<Blocks content={content} />
}
{ content && content.length == 0 &&
<Section padding={"medium"}></Section>
}
<AdminMenu
collection={"group"}
id={id}
isAuthenticated={authenticated}
/>
</>
)
}