wip

2026-08-27 10:04:59 +02:00
parent 55a51a521d
commit c64889c3b1
66 changed files with 12623 additions and 483 deletions
@@ -0,0 +1,68 @@
+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>
+  )
+}