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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 1x 32x 1x 1x 31x | import { Stack } from "@mui/material";
import { ArrowDownIcon, ArrowUpIcon, XIcon } from "@phosphor-icons/react";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { SidePanelHeaderBase } from "@shared/SidePanel/components/SidePanelHeader/SidePanelHeader";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
type Props = {
/** From `useTable` — the arrows walk the table's selection. */
onNavigate?: (direction: string | number) => void;
isFirst?: boolean;
isLast?: boolean;
/**
* Hidden when the ticket has no transaction on record — a free or legacy
* order — so the link never leads nowhere.
*/
showTransactionLink?: boolean;
onOpenTransaction: () => void;
onClose: () => void;
};
/**
* The panel's pinned header: the previous/next arrows on the left, the
* "Transaction detail" link (frame 7420-211783) and the close button on the
* right.
*/
const TicketPanelHeader = ({
onNavigate,
isFirst,
isLast,
showTransactionLink,
onOpenTransaction,
onClose,
}: Props) => (
<SidePanelHeaderBase
leftItems={
<Stack direction="row" gap="4px" alignItems="center">
<GiveIconButton
Icon={ArrowUpIcon}
variant="ghost"
size="small"
aria-label="Previous ticket"
disabled={isFirst}
onClick={() => onNavigate?.("prev")}
data-testid="ticket-panel-prev"
/>
<GiveIconButton
Icon={ArrowDownIcon}
variant="ghost"
size="small"
aria-label="Next ticket"
disabled={isLast}
onClick={() => onNavigate?.("next")}
data-testid="ticket-panel-next"
/>
</Stack>
}
rightItems={
<Stack direction="row" gap="12px" alignItems="center">
{/* A link, not a title (frame 7420-211783): it opens the purchase
behind this ticket as a second panel. */}
{showTransactionLink && (
<TransactionLink
variant="bodyS"
onClick={onOpenTransaction}
data-testid="ticket-panel-transaction-link"
>
Transaction detail
</TransactionLink>
)}
<GiveIconButton
Icon={XIcon}
variant="ghost"
size="small"
aria-label="Close"
onClick={onClose}
data-testid="ticket-panel-close"
/>
</Stack>
}
/>
);
export default TicketPanelHeader;
// Reads as the header's one action: same size as the title it replaced, but
// interactive. It stays on one line — the header's left side is a full-width
// Grid, so a shrinkable link breaks across two lines beside the close button.
const TransactionLink = styled(GiveText)(({ theme }) => ({
cursor: "pointer",
color: theme.palette.text?.primary,
whiteSpace: "nowrap",
flexShrink: 0,
"&:hover": { textDecoration: "underline" },
}));
|