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 | 8x 24x 24x 24x | import { ExportIcon } from "@phosphor-icons/react";
import GiveButton from "@shared/Button/GiveButton";
import { styled } from "@theme/v2/Provider";
import { useTicketsExport } from "./useTicketsExport";
type Props = {
eventId?: string;
};
/**
* The Export control on the Tickets tab (frame 7397-90412) — desktop only. On
* mobile the toolbar has room for a single icon, so Export moves into the
* overflow sheet (`EventTicketsMobileActions`, frame 7397-90578).
*/
const EventTicketsExport = ({ eventId }: Props) => {
const { exportTickets, isExporting } = useTicketsExport(eventId);
return (
<ExportButton
label="Export"
variant="ghost"
color="light"
size="large"
startIcon={<ExportIcon size={16} />}
disabled={isExporting}
onClick={exportTickets}
data-testid="event-tickets-export-button"
/>
);
};
export default EventTicketsExport;
// Matches the Filter control next to it (frame 7397-90412 puts both on the same
// 42px row, 12px apart).
const ExportButton = styled(GiveButton)(() => ({
borderRadius: "40px",
height: "42px",
whiteSpace: "nowrap",
}));
|