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 | 89x 89x 741x 2x 2x 741x 741x | import React from "react";
import { Box } from "@mui/material";
import { SxProps } from "@mui/system";
import { tooltipClasses } from "@mui/material";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import GiveButton from "@shared/Button/GiveButton";
import { useAppTheme } from "@theme/v2/Provider";
type TabProps = {
value: string;
onClick: (value: string) => void;
selected?: boolean;
disabled?: boolean;
label: string;
flex?: number;
tooltip?: string;
sx?: SxProps;
dataTestId?: string;
};
const TOOLTIP_POPPER_CLASSNAME = "ownership-tab-tooltip-popper";
const GiveOwnershipTab = ({
selected = false,
disabled = false,
value,
onClick,
label,
flex,
sx,
tooltip,
dataTestId,
}: TabProps) => {
const handleClick = () => {
Iif (disabled || selected) return;
onClick(value);
};
const theme = useAppTheme();
return (
<Box
sx={{
flex: flex || 1,
[`& .${TOOLTIP_POPPER_CLASSNAME}`]: {
flexDirection: "row",
},
...sx,
}}
>
<GiveTooltip
disableFocusListener={!tooltip}
disableHoverListener={!tooltip}
disableTouchListener={!tooltip}
title={tooltip}
placement="top-start"
className={TOOLTIP_POPPER_CLASSNAME}
sx={{
[`& .${tooltipClasses.tooltip}`]: {
top: "10px",
boxShadow: 0,
},
}}
>
<GiveButton
variant={selected ? "filled" : "outline"}
size="small"
label={label}
disabled={disabled}
onClick={handleClick}
data-testid={dataTestId}
fullWidth
sx={
!selected
? {
borderColor: theme.palette.neutral[10],
}
: null
}
/>
</GiveTooltip>
</Box>
);
};
export default GiveOwnershipTab;
|