church-website/src/app/gruppe/[slug]/page.tsx
2025-02-10 14:54:43 +01:00

104 lines
No EOL
2.9 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 { fetchEvents } from '@/fetch/events'
import { Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
import { Events } from '@/compositions/Events/Events'
import { transformEvents } from '@/utils/dto/events'
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 { RawHTML } from '@/components/RawHTML/RawHTML'
import { Blocks } from '@/compositions/Blocks/Blocks'
import { getPhoto } from '@/utils/dto/gallery'
import { isAuthenticated } from '@/utils/auth'
import { AdminMenu } from '@/components/AdminMenu/AdminMenu'
export default async function GroupPage({ params }: { params: Promise<{slug: string}>}) {
const slug = (await params).slug
const groups = await fetchGroup(slug)
if(!groups || groups.docs.length === 0) {
notFound();
}
const {id, shortDescription, photo,name, text_html, content } = groups.docs[0]
const media = getPhoto("tablet", photo)
const events = await fetchEvents({groupId: id})
const authenticated = await isAuthenticated();
return (
<>
{ 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>
<Container>
<Row>
<Col>
<div className={styles.content}>
{ text_html &&
<RawHTML html={text_html} />
}
</div>
</Col>
<Col>
{ events && events.docs.length > 0 &&
<>
<Title
title={"Veranstaltungen"}
size={"md"}
color={"contrast"}
/>
<Events
events={transformEvents(events.docs)}
n={3}
schema={"contrast"}
/>
</>
}
</Col>
</Row>
</Container>
</Section>
{ content && content.length > 0 &&
<Blocks content={content} />
}
<AdminMenu
collection={"group"}
id={id}
isAuthenticated={authenticated}
/>
</>
)
}