church-website/src/components/MassTable/MassTable.tsx
Benno Tielen 6036af1099 init
2024-08-21 17:08:42 +02:00

33 lines
No EOL
1.1 KiB
TypeScript

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