style: prettier

.eslintrc.cjs

@@ -5,9 +5,4 @@ module.exports = {
     project: ['./tsconfig.json'],
     tsconfigRootDir: __dirname,
   },
-  plugins: ['eslint-plugin-prettier'],
-  rules: {
-    "prefer-const": "error",
-    "prettier": "error"
-  }
 }

.storybook/preview.tsx

@@ -6,10 +6,10 @@ const preview: Preview = {
     (Story) => {
       return (
         <div className={lato.className}>
-          <Story/>
+          <Story />
         </div>
       )
-    }
+    },
   ],
   parameters: {
     controls: {

src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -14,9 +14,13 @@ type Args = {
   }
 }
 
-export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+export const generateMetadata = ({
+  params,
+  searchParams,
+}: Args): Promise<Metadata> =>
   generatePageMetadata({ config, params, searchParams })
 
-const NotFound = ({ params, searchParams }: Args) => NotFoundPage({ config, params, searchParams })
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, params, searchParams })
 
 export default NotFound

src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -14,9 +14,13 @@ type Args = {
   }
 }
 
-export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+export const generateMetadata = ({
+  params,
+  searchParams,
+}: Args): Promise<Metadata> =>
   generatePageMetadata({ config, params, searchParams })
 
-const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, params, searchParams })
 
 export default Page

src/app/(payload)/api/[...slug]/route.ts

@@ -1,7 +1,13 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY it because it could be re-written at any time. */
 import config from '@payload-config'
-import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+import {
+  REST_DELETE,
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+} from '@payloadcms/next/routes'
 
 export const GET = REST_GET(config)
 export const POST = REST_POST(config)

src/app/(payload)/layout.tsx

@@ -11,6 +11,8 @@ type Args = {
   children: React.ReactNode
 }
 
-const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+const Layout = ({ children }: Args) => (
+  <RootLayout config={configPromise}>{children}</RootLayout>
+)
 
 export default Layout

src/app/BannerWithMenu.tsx

@@ -1,29 +1,31 @@
-"use client"
+'use client'
 
-import {Menu} from "@/components/Menu/Menu";
+import { Menu } from '@/components/Menu/Menu'
-import {BannerText} from "@/components/BannerText/BannerText";
+import { BannerText } from '@/components/BannerText/BannerText'
-import {HomeBanner, HomeBannerHandle} from "@/components/HomeBanner/HomeBanner";
+import {
-import {useRef} from "react";
+  HomeBanner,
+  HomeBannerHandle,
+} from '@/components/HomeBanner/HomeBanner'
+import { useRef } from 'react'
 import { Worship } from '@/payload-types'
 
 type BannerWithMenuProps = {
   nextMass?: Worship
 }
 
-export const BannerWithMenu = ({nextMass}: BannerWithMenuProps) => {
+export const BannerWithMenu = ({ nextMass }: BannerWithMenuProps) => {
-
+  const bannerRef = useRef<HomeBannerHandle>(null)
-    const bannerRef = useRef<HomeBannerHandle>(null);
 
   function addThreeNewStars() {
-        bannerRef.current?.newStar();
+    bannerRef.current?.newStar()
-        bannerRef.current?.newStar();
+    bannerRef.current?.newStar()
-        bannerRef.current?.newStar();
+    bannerRef.current?.newStar()
   }
 
   return (
     <HomeBanner stars={40} ref={bannerRef}>
       <Menu starClick={addThreeNewStars} nextMass={nextMass} />
-            <BannerText/>
+      <BannerText />
     </HomeBanner>
   )
 }

src/app/fonts.ts

@@ -1,12 +1,12 @@
-import { Faustina, Lato } from 'next/font/google';
+import { Faustina, Lato } from 'next/font/google'
 
 export const faustina = Faustina({
   subsets: ['latin'],
-  display: "swap"
+  display: 'swap',
 })
 
 export const lato = Lato({
   subsets: ['latin'],
-  weight: ["400"],
+  weight: ['400'],
-  display: 'swap'
+  display: 'swap',
 })

src/app/layout.tsx

@@ -1,20 +1,19 @@
-import type { Metadata } from "next";
+import type { Metadata } from 'next'
-import {lato} from "./fonts";
+import { lato } from './fonts'
-
 
 export const metadata: Metadata = {
-  title: "Katholische Pfarrei Heilige drei Könige Berlin",
+  title: 'Katholische Pfarrei Heilige drei Könige Berlin',
-  description: "Generated by create next app",
+  description: 'Generated by create next app',
-};
+}
 
 export default function RootLayout({
   children,
-                                   }: Readonly<{
+}: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en" className={lato.className}>
       <body>{children}</body>
     </html>
-  );
+  )
 }

src/app/not-found.tsx

@@ -4,7 +4,11 @@ export default function Custom404() {
       <h1>404 - Seite nicht gefunden</h1>
 
       <p>
-        Glorreicher heiliger Antonius, du hast die göttliche Macht ausgeübt, verlorene Dinge wiederzufinden. Hilf uns, die Gnade Gottes wiederzuerlangen und mach mich stark im Dienst an Gott und an den Tugenden. Lass&apos; mich das Verlorene wiederfinden und zeige mir so deine Güte.
+        Glorreicher heiliger Antonius, du hast die göttliche Macht ausgeübt,
+        verlorene Dinge wiederzufinden. Hilf uns, die Gnade Gottes
+        wiederzuerlangen und mach mich stark im Dienst an Gott und an den
+        Tugenden. Lass&apos; mich das Verlorene wiederfinden und zeige mir so
+        deine Güte.
       </p>
     </>
   )

src/app/page.tsx

@@ -1,7 +1,7 @@
-import configPromise from "@payload-config";
+import configPromise from '@payload-config'
 import { BannerWithMenu } from '@/app/BannerWithMenu'
 import { Worship } from '@/payload-types'
-import styles from "./home.module.css"
+import styles from './home.module.css'
 import { MassTable } from '@/components/MassTable/MassTable'
 import { getPayloadHMR } from '@payloadcms/next/utilities'
 
@@ -9,13 +9,12 @@ const extractWorshipHours = (worships: Worship[]) => {
   let worshipByDate = new Map<string, Worship[]>()
 
   for (let worship of worships) {
-
+    const date = worship.date.substring(0, 10)
-    const date = worship.date.substring(0, 10);
 
     if (worshipByDate.has(date)) {
-      worshipByDate.get(date)?.push(worship);
+      worshipByDate.get(date)?.push(worship)
     } else {
-      worshipByDate.set(date, [worship]);
+      worshipByDate.set(date, [worship])
     }
   }
 
@@ -23,29 +22,28 @@ const extractWorshipHours = (worships: Worship[]) => {
 }
 
 export default async function Home() {
-
+  const today = new Date()
-  const today = new Date();
   const nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000)
-  const payload = await getPayloadHMR({ config: configPromise });
+  const payload = await getPayloadHMR({ config: configPromise })
   const worship = await payload.find({
     collection: 'worship',
     where: {
       and: [
         {
           date: {
-            greater_than_equal: today.toISOString().substring(0, 10)
+            greater_than_equal: today.toISOString().substring(0, 10),
-          }
+          },
         },
         {
           date: {
-            less_than: nextWeek.toISOString().substring(0, 10)
+            less_than: nextWeek.toISOString().substring(0, 10),
-          }
           },
-      ]
+        },
+      ],
     },
     limit: 30,
-    sort: 'date'
+    sort: 'date',
-  });
+  })
 
   const nextMass = await payload.find({
     collection: 'worship',
@@ -53,33 +51,34 @@ export default async function Home() {
       and: [
         {
           date: {
-            greater_than_equal: today.toISOString().substring(0, 10)
+            greater_than_equal: today.toISOString().substring(0, 10),
-          }
+          },
         },
         {
           cancelled: {
-            equals: false
+            equals: false,
-          }
+          },
-        }
+        },
-      ]
+      ],
     },
     limit: 1,
-    sort: "date"
+    sort: 'date',
   })
 
-  const worshipByDate = [...extractWorshipHours(worship.docs).entries()];
+  const worshipByDate = [...extractWorshipHours(worship.docs).entries()]
 
   return (
-
     <>
       <BannerWithMenu nextMass={nextMass.docs[0]} />
       <div className={styles.mass}>
         <h2>Kommen Sie vorbei, in unsere Heilige Messe!</h2>
 
         <div className={styles.table}>
-          {worshipByDate.map(([date, worships]) => <MassTable key={date} date={date} masses={worships} />)}
+          {worshipByDate.map(([date, worships]) => (
+            <MassTable key={date} date={date} masses={worships} />
+          ))}
         </div>
       </div>
     </>
-)
+  )
 }

src/app/worship/[id]/page.tsx

@@ -5,29 +5,29 @@ import { useLocation } from '@/hooks/useLocation'
 import { useLiturgyCalendarTitle } from '@/hooks/useLiturgyCalendarTitle'
 import { Container } from '@/components/Container/Container'
 import { Card } from '@/components/Card/Card'
-import styles from "./styles.module.css"
+import styles from './styles.module.css'
 import { MassTitle } from '@/components/MassTitle/MassTitle'
 import { useCompactDate, useDate } from '@/hooks/useCompactDate'
 import { useTime } from '@/hooks/useTime'
 import { Pill } from '@/components/Pill/Pill'
 import { useMassType } from '@/hooks/useMassType'
 import Image from 'next/image'
-import bell from "./bell.svg";
+import bell from './bell.svg'
-import locationIcon from "./location.svg"
+import locationIcon from './location.svg'
-import question from "./question.svg"
+import question from './question.svg'
 import { LocationMap } from '@/components/Map/Map'
 import { Testimony } from '@/components/Testimony/Testimony'
 
-export default async function Page({params}: {params: {id: string}}) {
+export default async function Page({ params }: { params: { id: string } }) {
-  const payload = await getPayloadHMR({ config: configPromise });
+  const payload = await getPayloadHMR({ config: configPromise })
   const worship = await payload.findByID({
     id: params.id,
-    collection: 'worship'
+    collection: 'worship',
-  });
+  })
   const location = useLocation(worship.location)
-  const title = useLiturgyCalendarTitle(worship.date);
+  const title = useLiturgyCalendarTitle(worship.date)
-  const date = useDate(worship.date);
+  const date = useDate(worship.date)
-  const time = useTime(worship.date);
+  const time = useTime(worship.date)
   const type = useMassType(worship.type)
 
   return (
@@ -37,11 +37,15 @@ export default async function Page({params}: {params: {id: string}}) {
       <Container>
         <MassTitle title={title} cancelled={worship.cancelled} />
 
-
         <div className={styles.info}>
           <Card>
             <div className={styles.centerIcon}>
-              <Image src={bell} alt={'Location'} width={60} className={styles.cardIcon} />
+              <Image
+                src={bell}
+                alt={'Location'}
+                width={60}
+                className={styles.cardIcon}
+              />
             </div>
             <div className={styles.cardContent}>
               <div className={styles.marginBottom}>
@@ -55,7 +59,12 @@ export default async function Page({params}: {params: {id: string}}) {
 
           <Card>
             <div className={styles.centerIcon}>
-              <Image src={locationIcon} alt={'Location'} width={60} className={styles.cardIcon} />
+              <Image
+                src={locationIcon}
+                alt={'Location'}
+                width={60}
+                className={styles.cardIcon}
+              />
             </div>
             <div className={styles.cardContent}>
               <div className={styles.address}>
@@ -65,22 +74,30 @@ export default async function Page({params}: {params: {id: string}}) {
             </div>
           </Card>
 
-          {worship.description &&
+          {worship.description && (
             <Card>
               <div className={styles.centerIcon}>
-                <Image src={question} alt={'Location'} width={60} className={styles.cardIcon} />
+                <Image
+                  src={question}
+                  alt={'Location'}
+                  width={60}
+                  className={styles.cardIcon}
+                />
               </div>
 
-                <div className={styles.cardText}>
+              <div className={styles.cardText}>{worship.description}</div>
-                  {worship.description}
-                </div>
             </Card>
-          }
+          )}
         </div>
       </Container>
 
       <LocationMap />
-      <Testimony name={"Johan Shafer"} testimony={"\"Die Eucharistie ist für mich wie ein spiritueller Boost. Wenn ich die Hostie empfange, fühle ich mich krass verbunden mit Jesus. Es ist wie ein Reminder, dass ich nicht allein bin, egal was abgeht. Dieser Moment gibt mir richtig Power und lässt mich mit einem starken Gefühl von Frieden und Hoffnung rausgehen.\""}/>
+      <Testimony
+        name={'Johan Shafer'}
+        testimony={
+          '"Die Eucharistie ist für mich wie ein spiritueller Boost. Wenn ich die Hostie empfange, fühle ich mich krass verbunden mit Jesus. Es ist wie ein Reminder, dass ich nicht allein bin, egal was abgeht. Dieser Moment gibt mir richtig Power und lässt mich mit einem starken Gefühl von Frieden und Hoffnung rausgehen."'
+        }
+      />
     </>
   )
 }

src/collections/Churches.ts

@@ -4,17 +4,17 @@ export const Churches: CollectionConfig = {
   slug: 'church',
   labels: {
     singular: {
-            de: 'Kirche'
+      de: 'Kirche',
     },
     plural: {
-            de: 'Kirchen'
+      de: 'Kirchen',
-        }
+    },
   },
   fields: [
     {
       name: 'name',
       label: {
-                de: 'Name'
+        de: 'Name',
       },
       type: 'text',
       required: true,
@@ -22,16 +22,16 @@ export const Churches: CollectionConfig = {
     {
       name: 'address',
       label: {
-                de: 'Addresse'
+        de: 'Addresse',
       },
       type: 'textarea',
       required: true,
-        }
+    },
   ],
   admin: {
-        useAsTitle: 'name'
+    useAsTitle: 'name',
   },
   access: {
-        read: () => true
+    read: () => true,
-    }
+  },
 }

src/collections/Testimony.ts

@@ -4,17 +4,17 @@ export const Testimony: CollectionConfig = {
   slug: 'testimony',
   labels: {
     singular: {
-      de: 'Zeugnis'
+      de: 'Zeugnis',
     },
     plural: {
-      de: 'Zeugnisse'
+      de: 'Zeugnisse',
-    }
+    },
   },
   fields: [
     {
       name: 'testimony',
       label: {
-        de: 'Zeugnis'
+        de: 'Zeugnis',
       },
       type: 'textarea',
       required: true,
@@ -30,7 +30,7 @@ export const Testimony: CollectionConfig = {
     {
       name: 'occupation',
       label: {
-        de: 'Beschäftigung'
+        de: 'Beschäftigung',
       },
       type: 'text',
       required: false,
@@ -38,16 +38,16 @@ export const Testimony: CollectionConfig = {
     {
       name: 'category',
       label: {
-        de: 'Kategorie'
+        de: 'Kategorie',
       },
       type: 'select',
       options: [
         {
           value: 'EUCHARIST',
-          label: 'Eucharistie'
+          label: 'Eucharistie',
-        }
+        },
       ],
       required: true,
-    }
+    },
-  ]
+  ],
 }

src/collections/Worship.ts

@@ -8,50 +8,50 @@ export const Worship: CollectionConfig = {
     },
     plural: {
       de: 'Gottesdienst',
-        }
+    },
   },
   fields: [
     {
       name: 'date',
       label: {
-                de: 'Datum'
+        de: 'Datum',
       },
       type: 'date',
       required: true,
       admin: {
         date: {
-                    pickerAppearance: 'dayAndTime'
+          pickerAppearance: 'dayAndTime',
-                }
+        },
-            }
+      },
     },
     {
       name: 'location',
       label: {
-                de: 'Location'
+        de: 'Location',
       },
-            type: "relationship",
+      type: 'relationship',
       relationTo: 'church',
       required: true,
     },
     {
       name: 'type',
       label: {
-              de: 'Categorie'
+        de: 'Categorie',
       },
       type: 'radio',
       options: [
         {
           label: 'Heilige Messe',
-                    value: "MASS"
+          value: 'MASS',
         },
         {
           label: 'Familien Messe',
-                    value: "FAMILY"
+          value: 'FAMILY',
         },
         {
-                    label: "Wort-Gottes-Feier",
+          label: 'Wort-Gottes-Feier',
-                    value: "WORD"
+          value: 'WORD',
-                }
+        },
       ],
       required: true,
     },
@@ -61,26 +61,26 @@ export const Worship: CollectionConfig = {
       required: true,
       defaultValue: false,
       label: {
-                de: 'Abgesagt'
+        de: 'Abgesagt',
-            }
+      },
     },
     {
       name: 'title',
       type: 'text',
       required: false,
       label: {
-                de: 'Liturgischer Tag'
+        de: 'Liturgischer Tag',
-            }
+      },
     },
     {
       name: 'description',
       type: 'textarea',
       label: {
-                de: 'Hinweise'
+        de: 'Hinweise',
-            }
+      },
     },
   ],
   access: {
-        read: () => true
+    read: () => true,
-    }
+  },
 }

src/components/BannerText/BannerText.stories.ts

@@ -1,13 +1,13 @@
-import type {Meta, StoryObj} from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
-import {BannerText} from "./BannerText";
+import { BannerText } from './BannerText'
 
 const meta: Meta<typeof BannerText> = {
-    component: BannerText
+  component: BannerText,
 }
 
-type Story = StoryObj<typeof BannerText>;
+type Story = StoryObj<typeof BannerText>
-export default meta;
+export default meta
 
 export const Default: Story = {
-    args: {}
+  args: {},
 }

src/components/BannerText/BannerText.tsx

@@ -1,16 +1,16 @@
-import styles from "./bannerText.module.css"
+import styles from './bannerText.module.css'
-import {faustina, lato} from "@/app/fonts";
+import { faustina, lato } from '@/app/fonts'
 
 export const BannerText = () => {
   return (
-        <div className={faustina.className + " " + styles.container}>
+    <div className={faustina.className + ' ' + styles.container}>
       <div className={styles.catholic}>KATHOLISCHE</div>
       <div className={styles.name}>
-                PFARREI <br/>
+        PFARREI <br />
-                HEILIGE <br/>
+        HEILIGE <br />
-                DREI KÖNIGE <br/>
+        DREI KÖNIGE <br />
       </div>
-            <div className={styles.berlin + " " + lato.className}>
+      <div className={styles.berlin + ' ' + lato.className}>
         Berlin Nord-Neukölln
       </div>
     </div>

src/components/Card/Card.stories.tsx

@@ -5,11 +5,11 @@ const meta: Meta<typeof Card> = {
   component: Card,
 }
 
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<typeof Card>
 export default meta
 
 export const Default: Story = {
   args: {
-    children: <>Some content</>
+    children: <>Some content</>,
   },
 }

src/components/Card/Card.tsx

@@ -1,13 +1,9 @@
-import styles from "./styles.module.css";
+import styles from './styles.module.css'
 
 type CardProps = {
-  children?: JSX.Element | JSX.Element[];
+  children?: JSX.Element | JSX.Element[]
 }
 
-export const Card = ({children}: CardProps) => {
+export const Card = ({ children }: CardProps) => {
-  return (
+  return <div className={styles.card}>{children}</div>
-    <div className={styles.card}>
-      {children}
-    </div>
-  )
 }

src/components/Card/styles.module.css

@@ -1,6 +1,6 @@
 .card {
   height: 260px;
   width: 235px;
-    box-shadow: 0 0 11px 0 rgba(79,66,79,0.26);
+  box-shadow: 0 0 11px 0 rgba(79, 66, 79, 0.26);
   background-color: #ffffff;
 }

src/components/Container/Container.stories.tsx

@@ -1,22 +1,22 @@
-import {Meta, StoryObj} from "@storybook/react";
+import { Meta, StoryObj } from '@storybook/react'
-import { Container } from "./Container";
+import { Container } from './Container'
 
 const meta: Meta<typeof Container> = {
-  component: Container
+  component: Container,
 }
 
-type Story = StoryObj<typeof Container>;
+type Story = StoryObj<typeof Container>
-export default meta;
+export default meta
 
 export const Default: Story = {
   args: {
-    children: <>Some content</>
+    children: <>Some content</>,
-  }
+  },
 }
 
 export const Yellow: Story = {
   args: {
-    background: "yellow",
+    background: 'yellow',
-    children: <>Some content</>
+    children: <>Some content</>,
-  }
+  },
 }

src/components/Container/Container.tsx

@@ -1,17 +1,15 @@
-import styles from "./styles.module.css"
+import styles from './styles.module.css'
 import classNames from 'classnames'
 
 type ContainerProps = {
-  background?: "yellow"
+  background?: 'yellow'
   children: JSX.Element | JSX.Element[]
 }
 
-export const Container = ({children, background}: ContainerProps) => {
+export const Container = ({ children, background }: ContainerProps) => {
   return (
-    <div className={classNames({[styles.yellow]: background === "yellow"})}>
+    <div className={classNames({ [styles.yellow]: background === 'yellow' })}>
-      <div className={styles.container}>
+      <div className={styles.container}>{children}</div>
-        {children}
-      </div>
     </div>
   )
 }

src/components/Container/styles.module.css

@@ -4,8 +4,12 @@
 }
 
 .yellow {
-    background: rgb(255,255,97);
+  background: rgb(255, 255, 97);
-    background: linear-gradient(180deg, rgba(255,255,97,0.0) 0%, rgb(255 250 163) 20%);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 97, 0) 0%,
+    rgb(255 250 163) 20%
+  );
   position: relative;
   top: -70px;
 }

src/components/HomeBanner/HomeBanner.css

@@ -4,9 +4,9 @@
 
 .splash {
   height: 80vh;
-    background: url("bg.svg") center center;
+  background: url('bg.svg') center center;
   background-size: cover;
-    color: #FFFFFF;
+  color: #ffffff;
   padding: 20px;
   position: relative;
 }

src/components/HomeBanner/HomeBanner.stories.ts

@@ -1,15 +1,15 @@
-import type { Meta, StoryObj} from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react'
-import {HomeBanner} from "@/components/HomeBanner/HomeBanner";
+import { HomeBanner } from '@/components/HomeBanner/HomeBanner'
 
 const meta: Meta<typeof HomeBanner> = {
   component: HomeBanner,
 }
 
-type Story = StoryObj<typeof HomeBanner>;
+type Story = StoryObj<typeof HomeBanner>
-export default meta;
+export default meta
 
 export const Default: Story = {
   args: {
-        stars: 50
+    stars: 50,
-    }
+  },
 }

src/components/HomeBanner/HomeBanner.tsx

@@ -1,72 +1,82 @@
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from "react";
+import React, {
-import "./HomeBanner.css"
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+import './HomeBanner.css'
 
 type HomeBannerProps = {
-    children?: React.ReactNode,
+  children?: React.ReactNode
   stars: number
 }
 
 export type HomeBannerHandle = {
-    newStar: () => void;
+  newStar: () => void
 }
 
-export const HomeBanner = forwardRef<HomeBannerHandle, HomeBannerProps>(function HomeBanner({children, stars}: HomeBannerProps, ref)  {
+export const HomeBanner = forwardRef<HomeBannerHandle, HomeBannerProps>(
-    const canvasRef = useRef<HTMLCanvasElement>(null);
+  function HomeBanner({ children, stars }: HomeBannerProps, ref) {
+    const canvasRef = useRef<HTMLCanvasElement>(null)
 
-    const drawStarAtPosition = useCallback((ctx: CanvasRenderingContext2D, x: number, y: number) => {
+    const drawStarAtPosition = useCallback(
-
+      (ctx: CanvasRenderingContext2D, x: number, y: number) => {
-        let r = 2.5 * Math.random();
+        let r = 2.5 * Math.random()
 
         //Draw the stars;
-        ctx.beginPath();
+        ctx.beginPath()
-        ctx.fillStyle = "white";
+        ctx.fillStyle = 'white'
-        ctx.arc(x, y, r, 0, Math.PI * 2);
+        ctx.arc(x, y, r, 0, Math.PI * 2)
-        ctx.fill();
+        ctx.fill()
-    }, []);
+      },
+      [],
+    )
 
-    const drawStar = useCallback((ctx: CanvasRenderingContext2D) => {
+    const drawStar = useCallback(
+      (ctx: CanvasRenderingContext2D) => {
         //Random position and size of stars;
-        let x = ctx.canvas.width * Math.random();
+        let x = ctx.canvas.width * Math.random()
-        let y = ctx.canvas.height * Math.random();
+        let y = ctx.canvas.height * Math.random()
 
-        drawStarAtPosition(ctx, x, y);
+        drawStarAtPosition(ctx, x, y)
-    }, [drawStarAtPosition]);
+      },
+      [drawStarAtPosition],
+    )
 
     useImperativeHandle(ref, () => {
       return {
         newStar() {
-                const context = canvasRef.current?.getContext("2d")
+          const context = canvasRef.current?.getContext('2d')
           if (context) {
             drawStar(context)
           }
+        },
       }
-        }
+    }, [drawStar])
-    }, [drawStar]);
-
 
     useEffect(() => {
       if (canvasRef.current) {
-            canvasRef.current.width = window.innerWidth;
+        canvasRef.current.width = window.innerWidth
-            canvasRef.current.height = 0.8 * window.innerHeight;
+        canvasRef.current.height = 0.8 * window.innerHeight
       }
-        const context = canvasRef.current?.getContext("2d");
+      const context = canvasRef.current?.getContext('2d')
-        if(context) {
+      if (context) {
         for (let i = 0; i < stars; i++) {
           //Glow effect;
-                context.shadowBlur = 10;
+          context.shadowBlur = 10
-                context.shadowColor = "white";
+          context.shadowColor = 'white'
 
           drawStar(context)
         }
       }
-    }, [drawStar, stars]);
+    }, [drawStar, stars])
 
     return (
       <div className="splash-bg">
         <canvas ref={canvasRef} className="stars"></canvas>
-            <div className="splash">
+        <div className="splash">{children}</div>
-                {children}
-            </div>
       </div>
     )
-});
+  },
+)

src/components/Map/Map.tsx

@@ -1,38 +1,35 @@
-"use client"
+'use client'
 
 import { useEffect, useRef, useState } from 'react'
 import mapboxgl from 'mapbox-gl'
-import styles from "./styles.module.css"
+import styles from './styles.module.css'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
 // todo: as env variable
-mapboxgl.accessToken ='pk.eyJ1IjoiYnRpZWxlbiIsImEiOiJjbHpzNmNoNjAxdmxqMmpzaWtxOGsxNnY2In0.4XrA_ZlvlmKZ7MG_tLo-mQ'
+mapboxgl.accessToken =
+  'pk.eyJ1IjoiYnRpZWxlbiIsImEiOiJjbHpzNmNoNjAxdmxqMmpzaWtxOGsxNnY2In0.4XrA_ZlvlmKZ7MG_tLo-mQ'
 
 export const LocationMap = () => {
-  const mapContainer = useRef<HTMLDivElement>(null);
+  const mapContainer = useRef<HTMLDivElement>(null)
-  const map = useRef<mapboxgl.Map>(null);
+  const map = useRef<mapboxgl.Map>(null)
-  const [lng, setLng] = useState(13.436093);
+  const [lng, setLng] = useState(13.436093)
-  const [lat, setLat] = useState(52.477608);
+  const [lat, setLat] = useState(52.477608)
-  const [zoom, setZoom] = useState(15.42);
+  const [zoom, setZoom] = useState(15.42)
 
   useEffect(() => {
-    if (map.current) return; // initialize map only once
+    if (map.current) return // initialize map only once
 
-    if(mapContainer.current) {
+    if (mapContainer.current) {
       map.current = new mapboxgl.Map({
         container: mapContainer.current,
-        logoPosition: "top-left",
+        logoPosition: 'top-left',
         attributionControl: false,
         style: 'mapbox://styles/btielen/clzs6etam008801qu6hpn9qbo',
         center: [lng, lat],
         zoom: zoom,
-      });
+      })
     }
+  })
 
-
+  return <div ref={mapContainer} className={styles.map}></div>
-  });
-
-  return (
-    <div ref={mapContainer} className={styles.map}></div>
-  )
 }

src/components/MassTable/MassTable.stories.ts

@@ -1,41 +1,41 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react'
-import { MassTable } from './MassTable';
+import { MassTable } from './MassTable'
 
 const meta: Meta<typeof MassTable> = {
   component: MassTable,
-};
+}
 
-export default meta;
+export default meta
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-        date: "2024-08-04",
+    date: '2024-08-04',
     masses: [
       {
-                id: "1",
+        id: '1',
-                date: "10:00",
+        date: '10:00',
-                locationName: "St. Christopherus",
+        locationName: 'St. Christopherus',
-                type: null
+        type: null,
       },
       {
-                id: "1",
+        id: '1',
-                date: "11:00",
+        date: '11:00',
-                locationName: "St. Richard",
+        locationName: 'St. Richard',
-                type: "FAMILY"
+        type: 'FAMILY',
       },
       {
-                id: "1",
+        id: '1',
-                date: "11:00",
+        date: '11:00',
-                locationName: "St. Clara",
+        locationName: 'St. Clara',
-                type: "WORD"
+        type: 'WORD',
       },
       {
-                id: "1",
+        id: '1',
-                date: "19:00",
+        date: '19:00',
-                locationName: "St. Clara",
+        locationName: 'St. Clara',
-                type: null
+        type: null,
-            }
+      },
-        ]
+    ],
-    }
+  },
 }

src/components/MassTable/MassTable.tsx

@@ -1,33 +1,40 @@
-import {MassTableRow} from "@/components/MassTable/MassTableRow";
+import { MassTableRow } from '@/components/MassTable/MassTableRow'
-import {useMemo} from "react";
+import { useMemo } from 'react'
-import styles from "./styles.module.css"
+import styles from './styles.module.css'
-import {faustina} from "@/app/fonts";
+import { faustina } from '@/app/fonts'
 import { Worship } from '@/payload-types'
 import { useCompactDate } from '@/hooks/useCompactDate'
 
 type MassTableProps = {
-    date: string,
+  date: string
   masses: Worship[]
 }
 
-export const MassTable = ({date, masses}: MassTableProps) => {
+export const MassTable = ({ date, masses }: MassTableProps) => {
-    let dateObj = useMemo(() => new Date(date), [date]);
+  let dateObj = useMemo(() => new Date(date), [date])
-    let compactDate = useCompactDate(date);
+  let compactDate = useCompactDate(date)
 
   return (
     <div className={styles.table}>
-            <h3 className={faustina.className}>{dateObj.toLocaleDateString("de-DE", {weekday: 'long'})} <small>{compactDate}</small></h3>
+      <h3 className={faustina.className}>
+        {dateObj.toLocaleDateString('de-DE', { weekday: 'long' })}{' '}
+        <small>{compactDate}</small>
+      </h3>
 
-            { masses.map(mass =>
+      {masses.map((mass) => (
         <MassTableRow
           key={mass.id}
           id={mass.id}
-                  locationName={typeof mass.location == "string" ? mass.location : mass.location.name}
+          locationName={
+            typeof mass.location == 'string'
+              ? mass.location
+              : mass.location.name
+          }
           date={mass.date}
           type={mass.type}
           cancelled={mass.cancelled}
         />
-            )}
+      ))}
     </div>
   )
 }

src/components/MassTable/MassTableRow.stories.ts

@@ -1,49 +1,49 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react'
-import { MassTableRow } from './MassTableRow';
+import { MassTableRow } from './MassTableRow'
 
 const meta: Meta<typeof MassTableRow> = {
   component: MassTableRow,
-};
+}
 
-export default meta;
+export default meta
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-        id: "1",
+    id: '1',
-        locationName: "St. Clara",
+    locationName: 'St. Clara',
-        date: "2024-08-23T15:00:00.000Z",
+    date: '2024-08-23T15:00:00.000Z',
     type: 'MASS',
     cancelled: false,
-    }
+  },
 }
 
 export const FamilyMass: Story = {
   args: {
-        id: "1",
+    id: '1',
-        locationName: "St. Christopherus",
+    locationName: 'St. Christopherus',
-        date: "2024-08-23T15:00:00.000Z",
+    date: '2024-08-23T15:00:00.000Z',
-        type: "FAMILY",
+    type: 'FAMILY',
     cancelled: false,
-    }
+  },
 }
 
 export const LiturgyOfTheWord: Story = {
   args: {
-        id: "1",
+    id: '1',
-        locationName: "St. Richard",
+    locationName: 'St. Richard',
-        date: "2024-08-23T15:00:00.000Z",
+    date: '2024-08-23T15:00:00.000Z',
-        type: "WORD",
+    type: 'WORD',
     cancelled: false,
-    }
+  },
 }
 
 export const Cancelled: Story = {
   args: {
-        id: "1",
+    id: '1',
-        locationName: "St. Richard",
+    locationName: 'St. Richard',
-        date: "2024-08-23T15:00:00.000Z",
+    date: '2024-08-23T15:00:00.000Z',
-        type: "WORD",
+    type: 'WORD',
     cancelled: true,
-    }
+  },
 }

src/components/MassTable/MassTableRow.tsx

@@ -1,47 +1,52 @@
-"use client"
+'use client'
 
-import styles from "./styles.module.css"
+import styles from './styles.module.css'
-import Image from "next/image";
+import Image from 'next/image'
-import family from "./family.svg"
+import family from './family.svg'
-import bible from "./bible.svg"
+import bible from './bible.svg'
-import {useState} from "react";
+import { useState } from 'react'
 import Link from 'next/link'
 import classNames from 'classnames'
 import { useTime } from '@/hooks/useTime'
 
 export type MassTableRowProps = {
-    id: string,
+  id: string
-    locationName: string,
+  locationName: string
-    date: string,
+  date: string
-    type: 'MASS' | 'FAMILY' | 'WORD',
+  type: 'MASS' | 'FAMILY' | 'WORD'
   cancelled: boolean
 }
 
-export const MassTableRow = ({id, locationName, date, type, cancelled}: MassTableRowProps) => {
+export const MassTableRow = ({
-    const [symbol, setSymbol] = useState("-");
+  id,
-    const time = useTime(date);
+  locationName,
+  date,
+  type,
+  cancelled,
+}: MassTableRowProps) => {
+  const [symbol, setSymbol] = useState('-')
+  const time = useTime(date)
   return (
-      <Link href={`/worship/${id}`} className={classNames({ [styles.cancelled]: cancelled }, styles.link)}>
+    <Link
+      href={`/worship/${id}`}
+      className={classNames({ [styles.cancelled]: cancelled }, styles.link)}
+    >
       <div
         className={styles.row}
-            onMouseEnter={() => setSymbol("†")}
+        onMouseEnter={() => setSymbol('†')}
-            onMouseLeave={() => setSymbol("-")}
+        onMouseLeave={() => setSymbol('-')}
       >
         <div className={styles.time}>{time}</div>
-            <div className={styles.symbol}>
+        <div className={styles.symbol}>{symbol}</div>
-                {symbol}
+        <div>{locationName}</div>
-            </div>
         <div>
-                {locationName}
+          {type === 'FAMILY' && (
-            </div>
+            <Image src={family} width={18} height={18} alt={'Familien Messe'} />
-            <div>
+          )}
-                { type === "FAMILY" && 
-                    <Image src={family} width={18} height={18} alt={"Familien Messe"} />
-                }
 
-                { type === "WORD" &&
+          {type === 'WORD' && (
-                    <Image src={bible} width={18} height={18} alt={"Wortgottesfeier"} />
+            <Image src={bible} width={18} height={18} alt={'Wortgottesfeier'} />
-                }
+          )}
         </div>
       </div>
     </Link>

src/components/MassTimer/MassTimer.stories.ts

@@ -1,25 +1,24 @@
-import type { Meta, StoryObj} from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react'
-import { MassTimer } from './MassTimer';
+import { MassTimer } from './MassTimer'
-import {fn} from "@storybook/test";
+import { fn } from '@storybook/test'
 
 const meta: Meta<typeof MassTimer> = {
-    component: MassTimer
+  component: MassTimer,
-};
+}
 
-type Story = StoryObj<typeof  MassTimer>;
+type Story = StoryObj<typeof MassTimer>
 export default meta
 
-
 export const OneDay: Story = {
   args: {
     timeout: new Date().getTime() + 1000 * 60 * 60 * 24,
-        onStarClick: fn()
+    onStarClick: fn(),
-    }
+  },
 }
 
 export const TimeOut: Story = {
   args: {
     timeout: new Date().getTime(),
-        onStarClick: fn()
+    onStarClick: fn(),
-    }
+  },
 }

src/components/MassTimer/MassTimer.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client'
 
-import {useCountdown} from "@/components/MassTimer/useCountdown";
+import { useCountdown } from '@/components/MassTimer/useCountdown'
-import styles from "./masstimer.module.css"
+import styles from './masstimer.module.css'
-import {useState} from "react";
+import { useState } from 'react'
-import {MassTimerTooltip} from "@/components/MassTimerTooltip/MassTimerTooltip";
+import { MassTimerTooltip } from '@/components/MassTimerTooltip/MassTimerTooltip'
 import { Worship } from '@/payload-types'
 
 type MassTimerProps = {
@@ -15,19 +15,21 @@ type MassTimerProps = {
   onStarClick?: () => void
 }
 
-export const MassTimer = ({nextMass, onStarClick}: MassTimerProps) => {
+export const MassTimer = ({ nextMass, onStarClick }: MassTimerProps) => {
-
+  const [displayTooltip, setDisplayTooltip] = useState<boolean>(false)
-    const [displayTooltip, setDisplayTooltip] = useState<boolean>(false);
+  const [days, hours, minutes, seconds] = useCountdown(
-    const [days, hours, minutes, seconds] = useCountdown(new Date(nextMass.date).getTime());
+    new Date(nextMass.date).getTime(),
+  )
 
   return (
     <div className={styles.container}>
       <div>
         <button
           className={styles.starButton}
-                    type={"button"}
+          type={'button'}
           onClick={onStarClick}
-                >🌟
+        >
+          🌟
         </button>
 
         <span onMouseEnter={() => setDisplayTooltip(true)}>
@@ -35,15 +37,16 @@ export const MassTimer = ({nextMass, onStarClick}: MassTimerProps) => {
         </span>
       </div>
 
-
       <div
         className={styles.tooltip}
         style={{
-                    visibility: displayTooltip ? "visible" : "hidden",
+          visibility: displayTooltip ? 'visible' : 'hidden',
           opacity: displayTooltip ? 1 : 0,
-                    transition: "ease-out 0.2s",
+          transition: 'ease-out 0.2s',
-                }} onMouseLeave={() => setDisplayTooltip(false)}>
+        }}
-                <MassTimerTooltip nextMass={nextMass}/>
+        onMouseLeave={() => setDisplayTooltip(false)}
+      >
+        <MassTimerTooltip nextMass={nextMass} />
       </div>
     </div>
   )

src/components/MassTimer/useCountdown.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
 
 /**
  * Countdown until targetDate,
@@ -7,21 +7,18 @@ import { useEffect, useState } from 'react';
  *
  */
 const useCountdown = (targetDate: number) => {
-
+  const [countDown, setCountDown] = useState(targetDate - new Date().getTime())
-    const [countDown, setCountDown] = useState(
-        targetDate - new Date().getTime()
-    );
 
   useEffect(() => {
     if (countDown > 0) {
-            setTimeout(() => setCountDown(countDown - 1000), 1000);
+      setTimeout(() => setCountDown(countDown - 1000), 1000)
     } else {
       setCountDown(0)
     }
-    }, [countDown]);
+  }, [countDown])
 
-    return getDaysHoursMinutesAndSeconds(countDown);
+  return getDaysHoursMinutesAndSeconds(countDown)
-};
+}
 
 /**
  * Return an array of four numbers, representing the
@@ -29,14 +26,14 @@ const useCountdown = (targetDate: number) => {
  */
 const getDaysHoursMinutesAndSeconds = (countDown: number) => {
   // calculate time left
-    const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
+  const days = Math.floor(countDown / (1000 * 60 * 60 * 24))
   const hours = Math.floor(
-        (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+    (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
-    );
+  )
-    const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
+  const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60))
-    const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
+  const seconds = Math.floor((countDown % (1000 * 60)) / 1000)
 
-    return [days, hours, minutes, seconds];
+  return [days, hours, minutes, seconds]
-};
+}
 
-export { useCountdown };
+export { useCountdown }

src/components/MassTimerTooltip/MassTimerTooltip.stories.ts

@@ -1,15 +1,13 @@
-import type { Meta, StoryObj} from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
-import {MassTimerTooltip} from "./MassTimerTooltip";
+import { MassTimerTooltip } from './MassTimerTooltip'
 
 const meta: Meta<typeof MassTimerTooltip> = {
-    component: MassTimerTooltip
+  component: MassTimerTooltip,
 }
 
-type Story = StoryObj<typeof MassTimerTooltip>;
+type Story = StoryObj<typeof MassTimerTooltip>
-export default meta;
+export default meta
 
 export const Default: Story = {
-    args: {
+  args: {},
-
-    }
 }

src/components/MassTimerTooltip/MassTimerTooltip.tsx

@@ -1,6 +1,6 @@
-import styles from "./massTimerTooltip.module.css";
+import styles from './massTimerTooltip.module.css'
-import clara from "./clara.svg"
+import clara from './clara.svg'
-import Image from "next/image";
+import Image from 'next/image'
 import { Worship } from '@/payload-types'
 import { useTime } from '@/hooks/useTime'
 import { useLocationName } from '@/hooks/useLocationName'
@@ -10,17 +10,15 @@ type MassTimerTooltipProps = {
   nextMass: Worship
 }
 
-export const MassTimerTooltip = ({nextMass}: MassTimerTooltipProps) => {
+export const MassTimerTooltip = ({ nextMass }: MassTimerTooltipProps) => {
-
+  const time = useTime(nextMass.date)
-  const time = useTime(nextMass.date);
+  const location = useLocationName(nextMass.location)
-  const location = useLocationName(nextMass.location);
+  const date = useCompactDate(nextMass.date)
-  const date = useCompactDate(nextMass.date);
 
   return (
-        <div
+    <div className={styles.tooltip}>
-            className={styles.tooltip}>
       <div className={styles.church}>
-                <Image src={clara} width={75} height={75} alt={""}/>
+        <Image src={clara} width={75} height={75} alt={''} />
       </div>
 
       <div>

src/components/MassTimerTooltip/massTimerTooltip.module.css

@@ -2,8 +2,12 @@
   width: 300px;
   padding: 20px;
   color: #4d4d4d;
-    background: rgb(244,244,244);
+  background: rgb(244, 244, 244);
-    background: linear-gradient(40deg, rgba(244,244,244,1) 0%, rgba(228,228,228,1) 100%);
+  background: linear-gradient(
+    40deg,
+    rgba(244, 244, 244, 1) 0%,
+    rgba(228, 228, 228, 1) 100%
+  );
   border: solid 1px #dddddd;
   border-radius: 6px;
   display: flex;

src/components/MassTitle/MassTitle.stories.tsx

@@ -5,19 +5,19 @@ const meta: Meta<typeof MassTitle> = {
   component: MassTitle,
 }
 
-type Story = StoryObj<typeof MassTitle>;
+type Story = StoryObj<typeof MassTitle>
 export default meta
 
 export const Default: Story = {
   args: {
     title: 'Mittwoch der 19. Woche im Jahreskreis',
-    cancelled: false
+    cancelled: false,
   },
 }
 
 export const Cancelled: Story = {
   args: {
     title: 'Mittwoch der 19. Woche im Jahreskreis',
-    cancelled: true
+    cancelled: true,
   },
 }

src/components/MassTitle/MassTitle.tsx

@@ -1,18 +1,26 @@
 import classNames from 'classnames'
 import { faustina } from '@/app/fonts'
-import styles from "./styles.module.css"
+import styles from './styles.module.css'
 import { Pill } from '@/components/Pill/Pill'
 
 type MassTitleProps = {
-  title: string,
+  title: string
   cancelled: boolean
 }
 
-export const MassTitle = ({title, cancelled}: MassTitleProps) => {
+export const MassTitle = ({ title, cancelled }: MassTitleProps) => {
   return (
     <div>
-      <div className={styles.mass}>Gottesdienst { cancelled && <Pill>ABGESAGT</Pill> }</div>
+      <div className={styles.mass}>
-      <h1 className={classNames(faustina.className, styles.title, { [styles.cancelled]: cancelled})}>{title}</h1>
+        Gottesdienst {cancelled && <Pill>ABGESAGT</Pill>}
+      </div>
+      <h1
+        className={classNames(faustina.className, styles.title, {
+          [styles.cancelled]: cancelled,
+        })}
+      >
+        {title}
+      </h1>
     </div>
   )
 }

src/components/Menu/Menu.stories.ts

@@ -1,15 +1,13 @@
-import {Meta, StoryObj} from "@storybook/react";
+import { Meta, StoryObj } from '@storybook/react'
-import { Menu } from "./Menu";
+import { Menu } from './Menu'
 
 const meta: Meta<typeof Menu> = {
-    component: Menu
+  component: Menu,
 }
 
-type Story = StoryObj<typeof Menu>;
+type Story = StoryObj<typeof Menu>
-export default meta;
+export default meta
 
 export const Default: Story = {
-    args: {
+  args: {},
-
-    }
 }

src/components/Menu/Menu.tsx

@@ -1,13 +1,13 @@
-import {MassTimer} from "@/components/MassTimer/MassTimer";
+import { MassTimer } from '@/components/MassTimer/MassTimer'
-import styles from "./styles.module.css"
+import styles from './styles.module.css'
-import MenuIcon from "./menu.svg"
+import MenuIcon from './menu.svg'
-import Image from "next/image";
+import Image from 'next/image'
 import { Worship } from '@/payload-types'
 import { MenuBaseLayer } from '@/components/MenuBaseLayer/MenuBaseLayer'
 
 type MenuProps = {
   starClick?: () => void
-    nextMass?: Worship,
+  nextMass?: Worship
 }
 
 export const Menu = (props: MenuProps) => {
@@ -15,26 +15,36 @@ export const Menu = (props: MenuProps) => {
     <nav className={styles.nav}>
       <MenuBaseLayer />
       <div className={styles.navMobile}>
-                <Image src={MenuIcon} width={25} height={25} alt={"Menu"} />
+        <Image src={MenuIcon} width={25} height={25} alt={'Menu'} />
       </div>
       <div className={styles.itemsLeft}>
-                <a className={styles.menuLink} href={""}>Home</a>
+        <a className={styles.menuLink} href={''}>
-                <a className={styles.menuLink} href={""}>Gemeinschaft</a>
+          Home
-                <a className={styles.menuLink} href={""}>Sakramenten</a>
+        </a>
-                <a className={styles.menuLink} href={""}>Kontakt</a>
+        <a className={styles.menuLink} href={''}>
+          Gemeinschaft
+        </a>
+        <a className={styles.menuLink} href={''}>
+          Sakramenten
+        </a>
+        <a className={styles.menuLink} href={''}>
+          Kontakt
+        </a>
       </div>
 
       <div className={styles.itemsRight}>
         <div>
-                    <a className={styles.menuLink} href={""}>Spenden</a>
+          <a className={styles.menuLink} href={''}>
+            Spenden
+          </a>
         </div>
         <div>
           <button className={styles.button}>Neu hier?</button>
         </div>
 
-              { props.nextMass &&
+        {props.nextMass && (
-                <MassTimer nextMass={props.nextMass} onStarClick={props.starClick}/>
+          <MassTimer nextMass={props.nextMass} onStarClick={props.starClick} />
-              }
+        )}
       </div>
     </nav>
   )

src/components/Menu/styles.module.css

@@ -52,7 +52,6 @@
 }
 
 @media screen and (max-width: 800px) {
-
   .navMobile {
     display: block;
   }

src/components/MenuBaseLayer/MenuBaseLayer.stories.tsx

@@ -1,15 +1,13 @@
-import {Meta, StoryObj} from "@storybook/react";
+import { Meta, StoryObj } from '@storybook/react'
 import { MenuBaseLayer } from '@/components/MenuBaseLayer/MenuBaseLayer'
 
 const meta: Meta<typeof MenuBaseLayer> = {
-  component: MenuBaseLayer
+  component: MenuBaseLayer,
 }
 
-type Story = StoryObj<typeof MenuBaseLayer>;
+type Story = StoryObj<typeof MenuBaseLayer>
-export default meta;
+export default meta
 
 export const Default: Story = {
-  args: {
+  args: {},
-
-  }
 }

src/components/MenuBaseLayer/MenuBaseLayer.tsx

@@ -1,4 +1,4 @@
-import styles from "./style.module.css"
+import styles from './style.module.css'
 
 export const MenuBaseLayer = () => {
   return <div className={styles.background}></div>

src/components/MenuBaseLayer/style.module.css

@@ -1,7 +1,7 @@
 .background {
   width: 100%;
   height: 340px;
-    background-image: url("./bg.svg");
+  background-image: url('./bg.svg');
   background-size: 100% 100%;
   position: absolute;
   top: 0;

src/components/Pill/Pill.stories.tsx

@@ -5,11 +5,11 @@ const meta: Meta<typeof Pill> = {
   component: Pill,
 }
 
-type Story = StoryObj<typeof Pill>;
+type Story = StoryObj<typeof Pill>
 export default meta
 
 export const Default: Story = {
   args: {
-    children: "Default"
+    children: 'Default',
   },
 }

src/components/Pill/Pill.tsx

@@ -1,13 +1,9 @@
-import styles from "./styles.module.css"
+import styles from './styles.module.css'
 
 type PillProps = {
   children: JSX.Element | string | JSX.Element[]
 }
 
-export const Pill = ({children}: PillProps) => {
+export const Pill = ({ children }: PillProps) => {
-  return (
+  return <div className={styles.pill}>{children}</div>
-    <div className={styles.pill}>
-      {children}
-    </div>
-  )
 }

src/components/Testimony/Testimony.stories.tsx

@@ -5,12 +5,13 @@ const meta: Meta<typeof Testimony> = {
   component: Testimony,
 }
 
-type Story = StoryObj<typeof Testimony>;
+type Story = StoryObj<typeof Testimony>
 export default meta
 
 export const Default: Story = {
   args: {
     name: 'Johan Schäfer',
-    testimony: 'Die Eucharistie ist für mich wie ein spiritueller Boost. Wenn ich die Hostie empfange, fühle ich mich krass verbunden mit Jesus. Es ist wie ein Reminder, dass ich nicht allein bin, egal was abgeht. Dieser Moment gibt mir richtig Power und lässt mich mit einem starken Gefühl von Frieden und Hoffnung rausgehen.'
+    testimony:
+      'Die Eucharistie ist für mich wie ein spiritueller Boost. Wenn ich die Hostie empfange, fühle ich mich krass verbunden mit Jesus. Es ist wie ein Reminder, dass ich nicht allein bin, egal was abgeht. Dieser Moment gibt mir richtig Power und lässt mich mit einem starken Gefühl von Frieden und Hoffnung rausgehen.',
   },
 }

src/components/Testimony/Testimony.tsx

@@ -1,27 +1,23 @@
-import styles from "./styles.module.css";
+import styles from './styles.module.css'
 import { Container } from '@/components/Container/Container'
 import classNames from 'classnames'
 import { faustina } from '@/app/fonts'
 
 type TestimonyProps = {
-  name: string,
+  name: string
-  testimony: string,
+  testimony: string
 }
 
-export const Testimony = ({name, testimony}: TestimonyProps) => {
+export const Testimony = ({ name, testimony }: TestimonyProps) => {
   return (
-    <Container background={"yellow"}>
+    <Container background={'yellow'}>
       <div className={styles.testimony}>
-        <div className={styles.person}>
+        <div className={styles.person}></div>
-
-        </div>
         <div>
           <p className={classNames(styles.testimonyText, faustina.className)}>
             {testimony}
           </p>
-          <p>
+          <p>{name}</p>
-            {name}
-          </p>
         </div>
       </div>
     </Container>

src/hooks/calendars.ts

@@ -2,11 +2,10 @@
  * This data was "hacked" together with the romcal package
  */
 
-
 type LiturgyData = {
-  name: string;
+  name: string
-  color: string;
+  color: string
-};
+}
 
 export const calendar: Record<string, LiturgyData> = {
   '2024-01-01': {
@@ -29230,4 +29229,3 @@ export const calendar: Record<string, LiturgyData> = {
     color: 'weiß',
   },
 }
-    

src/hooks/useCompactDate.ts

@@ -10,5 +10,11 @@ export const useCompactDate = (date: string) => {
  *
  */
 export const useDate = (date: string) => {
-  return date.substring(8, 10) + '.' + date.substring(5, 7) + '.' + date.substring(0, 4)
+  return (
+    date.substring(8, 10) +
+    '.' +
+    date.substring(5, 7) +
+    '.' +
+    date.substring(0, 4)
+  )
 }

src/hooks/useLiturgyCalendarTitle.ts

@@ -5,6 +5,6 @@ import { calendar } from '@/hooks/calendars'
  * e.G. "2024-12-25" => Christmas
  */
 export const useLiturgyCalendarTitle = (date: string) => {
-  const day = calendar[date.substring(0, 10)];
+  const day = calendar[date.substring(0, 10)]
-  return day.name;
+  return day.name
 }

src/hooks/useLocation.ts

@@ -1,14 +1,13 @@
-import {Church} from '@/payload-types'
+import { Church } from '@/payload-types'
 
-export const useLocation = (location: string | Church) : Church => {
+export const useLocation = (location: string | Church): Church => {
-
+  if (typeof location === 'string') {
-  if(typeof location === 'string') {
     return {
       address: '',
       createdAt: '',
       name: 'Unknown',
       updatedAt: '',
-      id: location
+      id: location,
     }
   } else {
     return location

src/hooks/useLocationName.ts

@@ -4,7 +4,7 @@ import { Church } from '@/payload-types'
  * Get user friendly location name
  */
 export const useLocationName = (location: string | Church) => {
-  if (typeof location == "string") {
+  if (typeof location == 'string') {
     return location
   } else {
     return location.name

src/hooks/useMassType.ts

@@ -1,12 +1,11 @@
-export const useMassType = (type: "MASS" | "FAMILY" | "WORD") => {
+export const useMassType = (type: 'MASS' | 'FAMILY' | 'WORD') => {
   switch (type) {
-    case "FAMILY":
+    case 'FAMILY':
-      return "Familien Messe";
+      return 'Familien Messe'
-    case "WORD":
+    case 'WORD':
-      return "Wort-Gottes-Feier";
+      return 'Wort-Gottes-Feier'
     case 'MASS':
     default:
-      return "Heilige Messe";
+      return 'Heilige Messe'
-
   }
 }

src/hooks/useTime.ts

@@ -2,6 +2,6 @@
  * From a UTC datetime, return the time in HH:MM format
  */
 export const useTime = (datetime: string) => {
-  let date = new Date(datetime);
+  let date = new Date(datetime)
-  return date.toLocaleTimeString('de-De', { timeStyle: "short"});
+  return date.toLocaleTimeString('de-De', { timeStyle: 'short' })
 }

src/payload-types.ts

@@ -8,162 +8,161 @@
 
 export interface Config {
   auth: {
-    users: UserAuthOperations;
+    users: UserAuthOperations
-  };
+  }
   collections: {
-    users: User;
+    users: User
-    media: Media;
+    media: Media
-    worship: Worship;
+    worship: Worship
-    church: Church;
+    church: Church
-    testimony: Testimony;
+    testimony: Testimony
-    'payload-preferences': PayloadPreference;
+    'payload-preferences': PayloadPreference
-    'payload-migrations': PayloadMigration;
+    'payload-migrations': PayloadMigration
-  };
+  }
   db: {
-    defaultIDType: string;
+    defaultIDType: string
-  };
+  }
-  globals: {};
+  globals: {}
-  locale: null;
+  locale: null
   user: User & {
-    collection: 'users';
+    collection: 'users'
-  };
+  }
 }
 export interface UserAuthOperations {
   forgotPassword: {
-    email: string;
+    email: string
-    password: string;
+    password: string
-  };
+  }
   login: {
-    email: string;
+    email: string
-    password: string;
+    password: string
-  };
+  }
   registerFirstUser: {
-    email: string;
+    email: string
-    password: string;
+    password: string
-  };
+  }
   unlock: {
-    email: string;
+    email: string
-    password: string;
+    password: string
-  };
+  }
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
  */
 export interface User {
-  id: string;
+  id: string
-  updatedAt: string;
+  updatedAt: string
-  createdAt: string;
+  createdAt: string
-  email: string;
+  email: string
-  resetPasswordToken?: string | null;
+  resetPasswordToken?: string | null
-  resetPasswordExpiration?: string | null;
+  resetPasswordExpiration?: string | null
-  salt?: string | null;
+  salt?: string | null
-  hash?: string | null;
+  hash?: string | null
-  loginAttempts?: number | null;
+  loginAttempts?: number | null
-  lockUntil?: string | null;
+  lockUntil?: string | null
-  password?: string | null;
+  password?: string | null
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "media".
  */
 export interface Media {
-  id: string;
+  id: string
-  alt: string;
+  alt: string
-  updatedAt: string;
+  updatedAt: string
-  createdAt: string;
+  createdAt: string
-  url?: string | null;
+  url?: string | null
-  thumbnailURL?: string | null;
+  thumbnailURL?: string | null
-  filename?: string | null;
+  filename?: string | null
-  mimeType?: string | null;
+  mimeType?: string | null
-  filesize?: number | null;
+  filesize?: number | null
-  width?: number | null;
+  width?: number | null
-  height?: number | null;
+  height?: number | null
-  focalX?: number | null;
+  focalX?: number | null
-  focalY?: number | null;
+  focalY?: number | null
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "worship".
  */
 export interface Worship {
-  id: string;
+  id: string
-  date: string;
+  date: string
-  location: string | Church;
+  location: string | Church
-  type: 'MASS' | 'FAMILY' | 'WORD';
+  type: 'MASS' | 'FAMILY' | 'WORD'
-  cancelled: boolean;
+  cancelled: boolean
-  title?: string | null;
+  title?: string | null
-  description?: string | null;
+  description?: string | null
-  updatedAt: string;
+  updatedAt: string
-  createdAt: string;
+  createdAt: string
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "church".
  */
 export interface Church {
-  id: string;
+  id: string
-  name: string;
+  name: string
-  address: string;
+  address: string
-  updatedAt: string;
+  updatedAt: string
-  createdAt: string;
+  createdAt: string
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "testimony".
  */
 export interface Testimony {
-  id: string;
+  id: string
-  testimony: string;
+  testimony: string
-  name: string;
+  name: string
-  occupation?: string | null;
+  occupation?: string | null
-  category: 'EUCHARIST';
+  category: 'EUCHARIST'
-  updatedAt: string;
+  updatedAt: string
-  createdAt: string;
+  createdAt: string
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-preferences".
  */
 export interface PayloadPreference {
-  id: string;
+  id: string
   user: {
-    relationTo: 'users';
+    relationTo: 'users'
-    value: string | User;
+    value: string | User
-  };
+  }
-  key?: string | null;
+  key?: string | null
   value?:
     | {
-        [k: string]: unknown;
+        [k: string]: unknown
       }
     | unknown[]
     | string
     | number
     | boolean
-    | null;
+    | null
-  updatedAt: string;
+  updatedAt: string
-  createdAt: string;
+  createdAt: string
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-migrations".
  */
 export interface PayloadMigration {
-  id: string;
+  id: string
-  name?: string | null;
+  name?: string | null
-  batch?: number | null;
+  batch?: number | null
-  updatedAt: string;
+  updatedAt: string
-  createdAt: string;
+  createdAt: string
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "auth".
  */
 export interface Auth {
-  [k: string]: unknown;
+  [k: string]: unknown
 }
 
-
 declare module 'payload' {
   export interface GeneratedTypes extends Config {}
 }

src/payload.config.ts

@@ -27,7 +27,7 @@ export default buildConfig({
     outputFile: path.resolve(dirname, 'payload-types.ts'),
   },
   i18n: {
-    supportedLanguages: { de }
+    supportedLanguages: { de },
   },
   db: mongooseAdapter({
     url: process.env.DATABASE_URI || '',

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -23,22 +19,11 @@
       }
     ],
     "paths": {
-      "@/*": [
+      "@/*": ["./src/*"],
-        "./src/*"
+      "@payload-config": ["./src/payload.config.ts"]
-      ],
-      "@payload-config": [
-        "./src/payload.config.ts"
-      ]
     },
     "target": "ES2017"
   },
-  "include": [
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-    "next-env.d.ts",
+  "exclude": ["node_modules"]
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
 }