84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import { useEffect } from 'react'
|
|
|
|
import type { listStaffMembers } from '#/lib/staff'
|
|
|
|
type StaffMember = Awaited<ReturnType<typeof listStaffMembers>>[number]
|
|
|
|
type Props = {
|
|
member: StaffMember | null
|
|
onClose: () => void
|
|
}
|
|
|
|
const dateFormatter = new Intl.DateTimeFormat('de-DE', {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short',
|
|
})
|
|
|
|
export function StaffMemberDetailDialog({ member, onClose }: Props) {
|
|
useEffect(() => {
|
|
if (!member) return
|
|
|
|
function handleKeyDown(event: KeyboardEvent) {
|
|
if (event.key === 'Escape') onClose()
|
|
}
|
|
|
|
document.addEventListener('keydown', handleKeyDown)
|
|
return () => document.removeEventListener('keydown', handleKeyDown)
|
|
}, [member, onClose])
|
|
|
|
if (!member) return null
|
|
|
|
return (
|
|
<div className="confirm-dialog-backdrop" onClick={onClose}>
|
|
<div
|
|
className="confirm-dialog reservation-detail-dialog"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="staff-member-detail-title"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<h2 id="staff-member-detail-title" className="confirm-dialog-title">
|
|
{member.name}
|
|
</h2>
|
|
|
|
<dl className="detail-list">
|
|
<div>
|
|
<dt>E-Mail</dt>
|
|
<dd>
|
|
<a href={`mailto:${member.email}`}>{member.email}</a>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Telefon</dt>
|
|
<dd>{member.phone ? <a href={`tel:${member.phone}`}>{member.phone}</a> : '—'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Rolle</dt>
|
|
<dd>{member.role === 'admin' ? 'Admin' : 'Mitarbeiter'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Status</dt>
|
|
<dd>{member.banned ? 'Gesperrt' : 'Aktiv'}</dd>
|
|
</div>
|
|
{member.banned && member.banReason && (
|
|
<div>
|
|
<dt>Sperrgrund</dt>
|
|
<dd>{member.banReason}</dd>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<dt>Angelegt am</dt>
|
|
<dd>{dateFormatter.format(new Date(member.createdAt))}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<div className="confirm-dialog-actions">
|
|
<button type="button" className="btn btn-secondary" onClick={onClose}>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|