= {
+ component: Event,
+}
+
+type Story = StoryObj
;
+export default meta
+
+export const Default: Story = {
+ args: {
+ title: "Sing & Pray",
+ date: "2024-12-02T09:21:19Z",
+ createdAt: "2024-12-02T09:21:19Z",
+ cancelled: false,
+ isRecurring: true,
+ location: "St. Richard",
+ description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.' +
+ 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
+ shortDescription: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ',
+ contact: 'Pfarrei Ulrich Kotzur\n' +
+ 'pfarrer@sankt-clara.de\n' +
+ '+4930 6851042',
+ address: 'Braunschweiger Str. 18, 12055 Berlin \n' +
+ 'Anfahrt über S-Sonnenallee oder Mareschtraße',
+ flyer: {
+ id: "1",
+ name: "some flyer",
+ createdAt: "2024-12-02T09:21:19Z",
+ updatedAt: "2024-12-02T09:21:19Z",
+ url: "https://disney.com",
+ },
+ photo: forest
+ },
+}
\ No newline at end of file
diff --git a/src/pageComponents/Event/Event.tsx b/src/pageComponents/Event/Event.tsx
new file mode 100644
index 0000000..cedc84d
--- /dev/null
+++ b/src/pageComponents/Event/Event.tsx
@@ -0,0 +1,131 @@
+import styles from "./styles.module.scss"
+import { Document } from '@/payload-types'
+import { Section } from '@/components/Section/Section'
+import { Title } from '@/components/Title/Title'
+import { Container } from '@/components/Container/Container'
+import { Row } from '@/components/Flex/Row'
+import { Col } from '@/components/Flex/Col'
+import { Pill } from '@/components/Pill/Pill'
+import { HR } from '@/components/HorizontalRule/HorizontalRule'
+import { useDate } from '@/hooks/useCompactDate'
+import { readableDateTime } from '@/utils/readableDate'
+import { TextDiv } from '@/components/Text/TextDiv'
+import { EventExcerpt } from '@/components/EventExcerpt/EventExcerpt'
+import { Button } from '@/components/Button/Button'
+import { StaticImageData } from 'next/image'
+
+type EventProps = {
+ title: string,
+ date: string,
+ createdAt: string,
+ cancelled: boolean,
+ isRecurring?: boolean,
+ location: string,
+ description: string,
+ shortDescription: string,
+ contact?: string,
+ address?: string,
+ flyer?: Document,
+ photo?: StaticImageData
+}
+
+export function EventPage(
+ {
+ title,
+ date,
+ createdAt,
+ cancelled,
+ isRecurring,
+ location,
+ description,
+ shortDescription,
+ contact,
+ address,
+ flyer,
+ photo
+ }: EventProps
+) {
+ const published = useDate(createdAt)
+ const readableDate = readableDateTime(date)
+ let where = location;
+
+ if (address) {
+ where += '\n' + address;
+ }
+
+
+ return (
+ <>
+
+
+
+
+
+
+
+ Herzliche Einladungen an unseren kommenden Veranstaltungen und Events teilzunehmen.
+
+
+ Publiziert am {published}
+
+
+
+ { isRecurring &&
+
Regelmäßig
+ }
+ { cancelled &&
+
Abgesagt
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { typeof flyer === "object" && flyer?.url &&
+
+ }
+
+
+
+
+
+
+
+
+ >
+ )
+}
\ No newline at end of file
diff --git a/src/pageComponents/Event/styles.module.scss b/src/pageComponents/Event/styles.module.scss
new file mode 100644
index 0000000..690baca
--- /dev/null
+++ b/src/pageComponents/Event/styles.module.scss
@@ -0,0 +1,19 @@
+.description {
+ text-align: center;
+ padding: 0 100px;
+}
+
+.published {
+ font-size: 12px;
+}
+
+.pills {
+ display: flex;
+ gap: 10px;
+}
+
+@media screen and (max-width: 576px) {
+ .description {
+ padding: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/payload-types.ts b/src/payload-types.ts
index e6c8de5..ef9c8b0 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -334,25 +334,15 @@ export interface Event {
title: string;
date: string;
location: string;
+ address?: string | null;
parish?: (string | Parish)[] | null;
group?: (string | Group)[] | null;
+ contact?: string | null;
shortDescription: string;
- description: {
- root: {
- type: string;
- children: {
- type: string;
- version: number;
- [k: string]: unknown;
- }[];
- direction: ('ltr' | 'rtl') | null;
- format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
- indent: number;
- version: number;
- };
- [k: string]: unknown;
- };
+ description: string;
+ flyer?: (string | null) | Document;
cancelled: boolean;
+ isRecurring: boolean;
updatedAt: string;
createdAt: string;
}
@@ -694,11 +684,15 @@ export interface EventSelect {
title?: T;
date?: T;
location?: T;
+ address?: T;
parish?: T;
group?: T;
+ contact?: T;
shortDescription?: T;
description?: T;
+ flyer?: T;
cancelled?: T;
+ isRecurring?: T;
updatedAt?: T;
createdAt?: T;
}
diff --git a/src/payload.config.ts b/src/payload.config.ts
index 0f5e17c..85d9317 100644
--- a/src/payload.config.ts
+++ b/src/payload.config.ts
@@ -33,6 +33,7 @@ import { Blog } from '@/collections/Blog'
import { Highlight } from '@/collections/Highlight'
import { Pages } from '@/collections/Pages'
import { Documents } from '@/collections/Documents'
+import { payloadCloud } from '@payloadcms/plugin-cloud'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
@@ -86,5 +87,6 @@ export default buildConfig({
sharp,
plugins: [
// storage-adapter-placeholder
+ payloadCloud()
],
})
diff --git a/yarn.lock b/yarn.lock
index ca6c469..9e367ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3827,9 +3827,9 @@ __metadata:
languageName: node
linkType: hard
-"@payloadcms/db-mongodb@npm:^3.2.1":
- version: 3.2.1
- resolution: "@payloadcms/db-mongodb@npm:3.2.1"
+"@payloadcms/db-mongodb@npm:^3.2.2":
+ version: 3.2.2
+ resolution: "@payloadcms/db-mongodb@npm:3.2.2"
dependencies:
http-status: "npm:1.6.2"
mongoose: "npm:8.8.1"
@@ -3838,14 +3838,14 @@ __metadata:
prompts: "npm:2.4.2"
uuid: "npm:10.0.0"
peerDependencies:
- payload: 3.2.1
- checksum: 10c0/2b0cf665db5a026d6131b8966b8262a1cd6252b4a734c7d520dba2dde589abdc5ecb196fe770ea15b6f9b52f2edaa0c8da01bea770477a2bd55315cd7b82c088
+ payload: 3.2.2
+ checksum: 10c0/bd833cc91167197a8074808d066b3ea1863c2205f5b076c386fdd84cbc179fbecadb049d5daf975a2d78ea9b78427ba2463d3f86b21573573279428190da0b3a
languageName: node
linkType: hard
-"@payloadcms/graphql@npm:3.2.1":
- version: 3.2.1
- resolution: "@payloadcms/graphql@npm:3.2.1"
+"@payloadcms/graphql@npm:3.2.2":
+ version: 3.2.2
+ resolution: "@payloadcms/graphql@npm:3.2.2"
dependencies:
graphql-scalars: "npm:1.22.2"
pluralize: "npm:8.0.0"
@@ -3853,21 +3853,21 @@ __metadata:
tsx: "npm:4.19.2"
peerDependencies:
graphql: ^16.8.1
- payload: 3.2.1
+ payload: 3.2.2
bin:
payload-graphql: bin.js
- checksum: 10c0/a6dc7677f0d6a5a2aaa148bc0e1172fb82dc12f6fc125d1e661e62b572fea6e30d614465f16cbd7da88a6dbb8bbac9243bc73c817ad47ae8d5b6492c390f69e8
+ checksum: 10c0/bbdf000c5668e21aa08fddbbf02e31203738e6338f88df3cde0836a9ca2df6bc84bd83140eb12122bccbc19539ab6cf687297f4b1e6ca37ced5ca04495a3ede2
languageName: node
linkType: hard
-"@payloadcms/next@npm:^3.2.1":
- version: 3.2.1
- resolution: "@payloadcms/next@npm:3.2.1"
+"@payloadcms/next@npm:^3.2.2":
+ version: 3.2.2
+ resolution: "@payloadcms/next@npm:3.2.2"
dependencies:
"@dnd-kit/core": "npm:6.0.8"
- "@payloadcms/graphql": "npm:3.2.1"
- "@payloadcms/translations": "npm:3.2.1"
- "@payloadcms/ui": "npm:3.2.1"
+ "@payloadcms/graphql": "npm:3.2.2"
+ "@payloadcms/translations": "npm:3.2.2"
+ "@payloadcms/ui": "npm:3.2.2"
busboy: "npm:^1.6.0"
file-type: "npm:19.3.0"
graphql-http: "npm:^1.22.0"
@@ -3882,8 +3882,8 @@ __metadata:
peerDependencies:
graphql: ^16.8.1
next: ^15.0.0
- payload: 3.2.1
- checksum: 10c0/77e6137b78c0f5531a9fb23f52873707ecc00384dfe3ee4d4f6304e093ea539049e7aa285ef5e2f1a1c555e5dfe8ad997acd9f6938b9ed28c5381c68650b7c0b
+ payload: 3.2.2
+ checksum: 10c0/6b3e673f12df0c26633104780ecfe4fb49cc21ec1d1fdd0566eec6ec9763e1b6de77da6edecbed00205f2ed06f3aba16a3f6d07509920f31744bda1faf496ca1
languageName: node
linkType: hard
@@ -3903,9 +3903,9 @@ __metadata:
languageName: node
linkType: hard
-"@payloadcms/richtext-lexical@npm:^3.2.1":
- version: 3.2.1
- resolution: "@payloadcms/richtext-lexical@npm:3.2.1"
+"@payloadcms/richtext-lexical@npm:^3.2.2":
+ version: 3.2.2
+ resolution: "@payloadcms/richtext-lexical@npm:3.2.2"
dependencies:
"@lexical/headless": "npm:0.20.0"
"@lexical/link": "npm:0.20.0"
@@ -3915,8 +3915,8 @@ __metadata:
"@lexical/rich-text": "npm:0.20.0"
"@lexical/selection": "npm:0.20.0"
"@lexical/utils": "npm:0.20.0"
- "@payloadcms/translations": "npm:3.2.1"
- "@payloadcms/ui": "npm:3.2.1"
+ "@payloadcms/translations": "npm:3.2.2"
+ "@payloadcms/ui": "npm:3.2.2"
"@types/uuid": "npm:10.0.0"
acorn: "npm:8.12.1"
bson-objectid: "npm:2.0.4"
@@ -3926,7 +3926,7 @@ __metadata:
mdast-util-from-markdown: "npm:2.0.2"
mdast-util-mdx-jsx: "npm:3.1.3"
micromark-extension-mdx-jsx: "npm:3.0.1"
- react-error-boundary: "npm:4.1.1"
+ react-error-boundary: "npm:4.1.2"
ts-essentials: "npm:10.0.3"
uuid: "npm:10.0.0"
peerDependencies:
@@ -3941,27 +3941,27 @@ __metadata:
"@lexical/selection": 0.20.0
"@lexical/table": 0.20.0
"@lexical/utils": 0.20.0
- "@payloadcms/next": 3.2.1
+ "@payloadcms/next": 3.2.2
lexical: 0.20.0
- payload: 3.2.1
+ payload: 3.2.2
react: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
react-dom: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
- checksum: 10c0/4d7e5932c13f0648641ffc7e2bacbc20d303ec1d4f1ebb6fc4dd5580845cbbb5353339fe669f03ede0354589bd2b0ddce9dbeaae3b6f248efdad95c0f6ed8b19
+ checksum: 10c0/a1db79898a19c8f175845af46fd03787cc39cf0771d8fbb05c435b79e510731fd1e98d3f1451892290853b4b92dfc67189712809eda718ae4634ea708bc5804d
languageName: node
linkType: hard
-"@payloadcms/translations@npm:3.2.1":
- version: 3.2.1
- resolution: "@payloadcms/translations@npm:3.2.1"
+"@payloadcms/translations@npm:3.2.2":
+ version: 3.2.2
+ resolution: "@payloadcms/translations@npm:3.2.2"
dependencies:
date-fns: "npm:4.1.0"
- checksum: 10c0/6778b89874c8ab9161de2c315ebbf39d52e286609b61f83670b8e919751a454efab86f565711b1e476151e73cbe9841c87aed59954a1101003fdd3aa6f8ea4a8
+ checksum: 10c0/31ceae81475c50ddb66d1aaf002b6dd43e5e3ca0128215b496684c1c431ac5b4381722b51a92e6727a2ae037dd9d76f53487911c84ff68d7a86b9fb8f00a9ef2
languageName: node
linkType: hard
-"@payloadcms/ui@npm:3.2.1":
- version: 3.2.1
- resolution: "@payloadcms/ui@npm:3.2.1"
+"@payloadcms/ui@npm:3.2.2":
+ version: 3.2.2
+ resolution: "@payloadcms/ui@npm:3.2.2"
dependencies:
"@dnd-kit/core": "npm:6.0.8"
"@dnd-kit/sortable": "npm:7.0.2"
@@ -3969,7 +3969,7 @@ __metadata:
"@faceless-ui/scroll-info": "npm:2.0.0-beta.0"
"@faceless-ui/window-info": "npm:3.0.0-beta.0"
"@monaco-editor/react": "npm:4.6.0"
- "@payloadcms/translations": "npm:3.2.1"
+ "@payloadcms/translations": "npm:3.2.2"
body-scroll-lock: "npm:4.0.0-beta.0"
bson-objectid: "npm:2.0.4"
date-fns: "npm:4.1.0"
@@ -3987,10 +3987,10 @@ __metadata:
uuid: "npm:10.0.0"
peerDependencies:
next: ^15.0.0
- payload: 3.2.1
+ payload: 3.2.2
react: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
react-dom: ^19.0.0 || ^19.0.0-rc-65a56d0e-20241020
- checksum: 10c0/89e62c2a3408122b8b9174e1c677212464972daedb8720e1f803c3e95c72743d5b847faba806eaf38c91dea47a53cb0ad17e41443a9f23d2eef2fb5af0346a5b
+ checksum: 10c0/afeb3d2776a5c5147097b5e9ef8eb30ff2f6e876b36be169ef7b50f4decc0b5bf548c0433fa9892deb321677da83a1cf5f4c407cb51fe1956eaf2ba79c63c29b
languageName: node
linkType: hard
@@ -8581,10 +8581,10 @@ __metadata:
resolution: "drei-koenige-v3@workspace:."
dependencies:
"@chromatic-com/storybook": "npm:^1.6.1"
- "@payloadcms/db-mongodb": "npm:^3.2.1"
- "@payloadcms/next": "npm:^3.2.1"
+ "@payloadcms/db-mongodb": "npm:^3.2.2"
+ "@payloadcms/next": "npm:^3.2.2"
"@payloadcms/plugin-cloud": "npm:^3.0.2"
- "@payloadcms/richtext-lexical": "npm:^3.2.1"
+ "@payloadcms/richtext-lexical": "npm:^3.2.2"
"@storybook/addon-essentials": "npm:^8.2.9"
"@storybook/addon-interactions": "npm:^8.2.9"
"@storybook/addon-links": "npm:^8.2.9"
@@ -8608,7 +8608,7 @@ __metadata:
graphql: "npm:^16.8.1"
mapbox-gl: "npm:^3.5.2"
next: "npm:15.0.0"
- payload: "npm:^3.2.1"
+ payload: "npm:^3.2.2"
qs-esm: "npm:^7.0.2"
react: "npm:19.0.0-rc-65a56d0e-20241020"
react-dom: "npm:19.0.0-rc-65a56d0e-20241020"
@@ -13633,13 +13633,13 @@ __metadata:
languageName: node
linkType: hard
-"payload@npm:^3.2.1":
- version: 3.2.1
- resolution: "payload@npm:3.2.1"
+"payload@npm:^3.2.2":
+ version: 3.2.2
+ resolution: "payload@npm:3.2.2"
dependencies:
"@monaco-editor/react": "npm:4.6.0"
"@next/env": "npm:^15.0.0"
- "@payloadcms/translations": "npm:3.2.1"
+ "@payloadcms/translations": "npm:3.2.2"
"@types/busboy": "npm:1.5.4"
ajv: "npm:8.17.1"
bson-objectid: "npm:2.0.4"
@@ -13668,7 +13668,7 @@ __metadata:
graphql: ^16.8.1
bin:
payload: bin.js
- checksum: 10c0/aaa1915da20312f593acbbf5c5e6e9d77cf5bc9f3af4ba32a82924f6a2cf3ed6a534d52636345d51c4bcba817cb9176fd681c4ff3b0bb4fa26a52f34874bf74c
+ checksum: 10c0/5800f0db7b1e7df40496c311f72f2162a31f949019828079897c8e7b11d724ff0b0f92b2e5f45e022a0a3d261988ab3335b44df65ab0f6f598f989365aea7f0e
languageName: node
linkType: hard
@@ -14448,14 +14448,14 @@ __metadata:
languageName: node
linkType: hard
-"react-error-boundary@npm:4.1.1":
- version: 4.1.1
- resolution: "react-error-boundary@npm:4.1.1"
+"react-error-boundary@npm:4.1.2":
+ version: 4.1.2
+ resolution: "react-error-boundary@npm:4.1.2"
dependencies:
"@babel/runtime": "npm:^7.12.5"
peerDependencies:
react: ">=16.13.1"
- checksum: 10c0/0faa4236833a5d98844f84180c8f54316b555bb3e1b38b37d59e6edf8baa754c4fad4570155dc49de61558a0e912fb7143554657f9abccf8ccd08fbee1bd7ac4
+ checksum: 10c0/0737e5259bed40ce14eb0823b3c7b152171921f2179e604f48f3913490cdc594d6c22d43d7abb4ffb1512c832850228db07aa69d3b941db324953a5e393cb399
languageName: node
linkType: hard