89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
export const EventGuestsDrawer = () => {
|
|
return (
|
|
<div
|
|
id="attendeesDrawer"
|
|
class="drawer-overlay"
|
|
style="display: none; position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s ease;"
|
|
>
|
|
<div
|
|
class="drawer-panel"
|
|
style="position: fixed; background: var(--surface-card); box-shadow: var(--shadow-lg); z-index: 1050; display: flex; flex-direction: column; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);"
|
|
>
|
|
<div style="padding: 1.5rem; border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 0.25rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
|
<h2
|
|
id="guestDrawerTitle"
|
|
style="margin: 0; font-size: 1.25rem; color: var(--text-primary);"
|
|
>
|
|
[Event Name] Guests
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
onclick="closeAttendeesDrawer()"
|
|
style="background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; line-height: 1;"
|
|
aria-label="Close Drawer"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
<div
|
|
id="guestDrawerContext"
|
|
style="font-size: 0.8rem; color: var(--text-secondary);"
|
|
>
|
|
Event Pass · <span id="guestDrawerClaimed">0</span> /{" "}
|
|
<span id="guestDrawerMax">0</span> Claimed Seats ·{" "}
|
|
<span id="guestDrawerCountdown">⏳ 0h 0m left</span>{" "}
|
|
· (<span id="guestDrawerExpiresAt">--:--</span>)
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="attendeesDrawerContent"
|
|
style="flex: 1; overflow-y: auto; padding: 1.5rem;"
|
|
>
|
|
{/* Populated dynamically via JS */}
|
|
<div style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-muted); font-size: 0.9rem;">
|
|
Loading attendees...
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
{`
|
|
/* Desktop Slide-Over Panel */
|
|
@media (min-width: 768px) {
|
|
.drawer-panel {
|
|
top: 0;
|
|
right: 0;
|
|
width: 420px;
|
|
height: 100vh;
|
|
transform: translateX(100%);
|
|
}
|
|
.drawer-panel.open {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
/* Mobile Bottom Sheet */
|
|
@media (max-width: 767px) {
|
|
.drawer-panel {
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 80vh;
|
|
border-radius: 16px 16px 0 0;
|
|
transform: translateY(100%);
|
|
}
|
|
.drawer-panel.open {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
.drawer-overlay.open {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
}
|
|
`}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|