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 97 98 99 100 101 102 103 104 105 | 89x 24x 24x 89x 257x 24x | import React from "react";
import { Box, styled } from "@mui/material";
import { BoxProps, SxProps } from "@mui/system";
import { palette } from "@palette";
import { Tooltip } from "@common/Tooltip";
import { tooltipClasses } from "@mui/material";
type TabProps = {
value: string;
onClick: (value: string) => void;
selected?: boolean;
disabled?: boolean;
children: React.ReactNode;
flex?: number;
tooltip?: string;
sx?: SxProps;
dataTestId?: string;
};
const OwnershipTab = ({
selected = false,
disabled = false,
value,
onClick,
children,
flex,
sx,
tooltip,
dataTestId,
}: TabProps) => {
const handleClick = () => {
if (disabled || selected) return;
onClick(value);
};
return (
<Box sx={{ flex: flex || 1, ...sx }} className="ownership-tab-container">
<Tooltip
disableFocusListener={!tooltip}
disableHoverListener={!tooltip}
disableTouchListener={!tooltip}
title={tooltip}
placement="top"
sx={{
[`& .${tooltipClasses.tooltip}`]: {
top: "10px",
boxShadow: 0,
},
}}
>
<TabBase
className="ownership-tab-base"
type="button"
selected={selected}
disabled={disabled}
onClick={handleClick}
data-testid={dataTestId}
>
{children}
</TabBase>
</Tooltip>
</Box>
);
};
const TabBase = styled("button", {
shouldForwardProp: (prop) => prop !== "selected" && prop !== "disabled",
})<BoxProps & { selected?: boolean; disabled?: boolean }>(
({ theme, selected, disabled }) => ({
all: "unset",
display: "flex",
minWidth: "80px",
padding: "10px",
justifyContent: "center",
alignItems: "center",
borderRadius: "8px",
cursor: disabled || selected ? "default" : "pointer",
fontSize: 14,
color: palette.neutral[80],
lineHeight: "120%",
userSelect: "none",
opacity: disabled && !selected ? 0.5 : 1,
width: "100%",
[theme.breakpoints.down("sm")]: {
minWidth: "50px",
},
...(selected
? {
border: `1px solid ${palette.liftedWhite[100]}`,
background: palette.liftedWhite[100],
}
: {
border: `1px solid ${palette.neutral[10]}`,
background: palette.neutral[5],
"&:hover": {
border: !disabled
? `1px solid ${palette.neutral[40]}`
: `1px solid ${palette.liftedWhite[100]}`,
},
}),
}),
);
export default OwnershipTab;
|