69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { useEffect } from 'react'
|
|
|
|
import type { getTables } from '#/lib/reservations'
|
|
|
|
type TableRow = Awaited<ReturnType<typeof getTables>>[number]
|
|
|
|
type Props = {
|
|
table: TableRow | null
|
|
onClose: () => void
|
|
}
|
|
|
|
export function TableDetailDialog({ table, onClose }: Props) {
|
|
useEffect(() => {
|
|
if (!table) return
|
|
|
|
function handleKeyDown(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') onClose()
|
|
}
|
|
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => document.removeEventListener('keydown', handleKeyDown)
|
|
}, [table, onClose])
|
|
|
|
if (!table) return null
|
|
|
|
return (
|
|
<div className="confirm-dialog-backdrop" onClick={onClose}>
|
|
<div
|
|
className="confirm-dialog reservation-detail-dialog"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="table-detail-title"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<h2 id="table-detail-title" className="confirm-dialog-title">
|
|
{table.name}
|
|
</h2>
|
|
|
|
{table.imageUrl && <img className="table-preview" src={table.imageUrl} alt="" />}
|
|
|
|
<dl className="detail-list">
|
|
<div>
|
|
<dt>Tischnummer</dt>
|
|
<dd>{table.tableNumber ?? '—'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Name</dt>
|
|
<dd>{table.name}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Plätze</dt>
|
|
<dd>{table.seats}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Marker</dt>
|
|
<dd>{table.markerX !== null && table.markerY !== null ? 'Gesetzt' : 'Nicht gesetzt'}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<div className="confirm-dialog-actions">
|
|
<button type="button" className="btn btn-secondary" onClick={onClose}>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|