Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 46x 46x 17x 20x | import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import SeatMapRange from "./SeatMapRange";
import type { SeatingRowGroup } from "../seating.helpers";
const LABEL_COLOR = "#666665";
type Props = {
group: SeatingRowGroup;
value: number[];
canEdit: boolean;
onToggle: (id: number) => void;
// rowID → owning ticket name for rows assigned to OTHER tickets (rendered disabled).
takenRows?: Map<number, string>;
};
// PAY Builder 031 — one row label (e.g. "A") and its ranges. Multiple ranges of the same
// row (A 1–5 VIP, A 6–10 Standard) sit side by side with extra spacing between them.
const SeatMapRow = ({ group, value, canEdit, onToggle, takenRows }: Props) => (
<Stack
direction="row"
alignItems="center"
gap="12px"
sx={{
px: "12px",
py: "4px",
borderRadius: "4px",
// Figma hover: the whole row lifts onto a white card.
"&:hover": { background: "#FFFFFF" },
}}
>
<GiveText variant="bodyXS" sx={{ color: LABEL_COLOR, minWidth: "12px" }}>
{group.rowLabel}
</GiveText>
<Stack direction="row" alignItems="flex-start" gap="16px" flexWrap="wrap">
{group.ranges.map((range) => (
<SeatMapRange
key={range.id}
range={range}
selected={value.includes(range.id)}
canEdit={canEdit}
onToggle={onToggle}
takenBy={takenRows?.get(range.id)}
/>
))}
</Stack>
</Stack>
);
export default SeatMapRow;
|