57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import styles from './styles.module.scss'
|
|
import Image from 'next/image'
|
|
import family from './family.svg'
|
|
import bible from './bible.svg'
|
|
import { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import classNames from 'classnames'
|
|
import { useTime } from '@/hooks/useTime'
|
|
|
|
export type MassTableRowProps = {
|
|
id: string
|
|
date: string
|
|
type: 'MASS' | 'FAMILY' | 'WORD'
|
|
cancelled: boolean
|
|
}
|
|
|
|
export const MassTableRow = ({
|
|
id,
|
|
date,
|
|
type,
|
|
cancelled,
|
|
}: MassTableRowProps) => {
|
|
const [symbol, setSymbol] = useState('')
|
|
const time = useTime(date)
|
|
//const compactDate = useCompactDate(date)
|
|
//const day = useShortDayName(date)
|
|
const day = new Date(date).toLocaleDateString("de-DE", {weekday: 'long'})
|
|
|
|
return (
|
|
<Link
|
|
href={`/gottesdienst/${id}`}
|
|
className={classNames({ [styles.cancelled]: cancelled }, styles.link)}
|
|
>
|
|
<div
|
|
className={styles.row}
|
|
onMouseEnter={() => setSymbol('†')}
|
|
onMouseLeave={() => setSymbol('')}
|
|
>
|
|
<div className={styles.day}>{day}</div>
|
|
<div className={styles.symbol}>{symbol}</div>
|
|
<div className={styles.time}>
|
|
{time}
|
|
|
|
{type === 'FAMILY' && (
|
|
<Image src={family} width={18} height={18} alt={'Familien Messe'} />
|
|
)}
|
|
|
|
{type === 'WORD' && (
|
|
<Image src={bible} width={18} height={18} alt={'Wortgottesfeier'} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|