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 | 3x 227x 227x | import { Box } from "@mui/material";
import GiveText from "shared/Text/GiveText";
import GiveIconButton from "shared/IconButton/GiveIconButton";
import { XIcon } from "@phosphor-icons/react";
import { styled } from "theme/v2/Provider";
import GiveTooltip from "shared/Tooltip/GiveTooltip";
type Props = {
handleClose: () => void;
isMerchant?: boolean;
};
const CreateMerchantHeader = ({ handleClose, isMerchant }: Props) => {
return (
<Container>
<GiveText variant="bodyM" color="primary">
Add {isMerchant ? "Merchant" : "Provider"}
</GiveText>
<Box>
<GiveTooltip color="default" title="Close">
<GiveIconButton
Icon={XIcon}
variant="ghost"
aria-label="close"
onClick={handleClose}
/>
</GiveTooltip>
</Box>
</Container>
);
};
const Container = styled(Box)(({ theme }) => ({
padding: "8px 20px",
display: "flex",
justifyContent: "space-between",
backdropFilter: "blur(8px)",
alignItems: "center",
minHeight: "64px",
position: "sticky",
top: 0,
zIndex: 100,
borderBottom: `1px solid ${theme.palette.border?.primary}`,
}));
export default CreateMerchantHeader;
|