jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Added complex data

Browse Source
This commit is contained in:
Jose Selesan
2026-05-19 10:35:23 -03:00
parent 0b6041d146
commit 57416bf53a
1 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
apps/frontend/src/features/public-booking/public-booking-page.tsx
View File

@@ -485,6 +485,33 @@ function PublicBookingPageChrome({
);
}
function ComplexInfoPanel({
complexName,
complexAddress,
}: {
complexName?: string;
complexAddress?: string;
}) {
return (
<Panel className="p-5">
<div className="flex items-start gap-4">
<div className="flex size-12 shrink-0 items-center justify-center rounded-full border border-emerald-500/40 bg-emerald-500/12">
<Building2 className="size-6 text-emerald-400" />
</div>
<div className="min-w-0">
<h2 className="text-lg font-semibold text-white">{complexName ?? 'Complex'}</h2>
{complexAddress && (
<p className="mt-1 flex items-start gap-2 text-sm text-white/62">
<MapPin className="mt-0.5 size-4 shrink-0 text-emerald-400" />
<span className="leading-relaxed">{complexAddress}</span>
</p>
)}
</div>
</div>
</Panel>
);
}
function PublicBookingDesktop(props: BookingShellProps) {
const {
courts,
@@ -520,6 +547,7 @@ function PublicBookingDesktop(props: BookingShellProps) {
>
<div className="mx-auto grid max-w-[1320px] grid-cols-[330px_minmax(0,1fr)] gap-5 px-10">
<aside className="space-y-4">
<ComplexInfoPanel complexName={props.complexName} complexAddress={props.complexAddress} />
<Panel className="p-5">
<h2 className="text-lg font-semibold">Seleccioná tu cancha</h2>
<div className="mt-5 space-y-4">
@@ -968,7 +996,7 @@ function BookingTimeline({
}
>
<div className={compact ? 'min-w-[540px] px-3' : 'min-w-[780px]'}>
<div className="relative mt-5 h-7">
<div className="relative mt-2 h-6">
{ticks.map((tick) => (
<div
key={tick}
@@ -979,7 +1007,7 @@ function BookingTimeline({
</div>
))}
</div>
<div className={compact ? 'relative h-28' : 'relative h-36'}>
<div className={compact ? 'relative h-20' : 'relative h-24'}>
{ticks.map((tick) => (
<span
key={tick}
@@ -1008,7 +1036,7 @@ function BookingTimeline({
endTime: slot.endTime,
});
}}
className={`absolute top-12 flex h-16 min-w-[50px] items-center justify-center rounded border text-xs transition ${
className={`absolute top-7 flex h-12 min-w-[50px] items-center justify-center rounded border text-xs transition ${
selected
? 'border-emerald-300 bg-emerald-500/45 text-white shadow-lg shadow-emerald-500/20'
: 'border-emerald-500 bg-emerald-500/18 text-white hover:bg-emerald-500/28'
@@ -1036,7 +1064,7 @@ function BookingTimeline({
return (
<div
key={`${court?.courtId}-blocked-${slot.startTime}`}
className={`absolute top-12 flex h-16 min-w-[44px] items-center justify-center rounded border ${
className={`absolute top-7 flex h-12 min-w-[44px] items-center justify-center rounded border ${
maintenance
? 'border-red-500/80 bg-red-500/28 text-red-100'
: 'border-blue-500/70 bg-blue-500/24 text-blue-100'
@@ -1057,7 +1085,7 @@ function BookingTimeline({
<span className="rounded-md bg-emerald-500 px-2 py-1 text-xs font-bold text-white shadow-lg shadow-emerald-500/25">
{selectedSlot.startTime}
</span>
<span className="h-24 w-px border-l border-dashed border-emerald-400" />
<span className="h-14 w-px border-l border-dashed border-emerald-400" />
</div>
)}
</div>