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 | 8153x 7201x 69x 135x 64944x 7201x | import { Stack } from "@mui/material";
import { styled } from "@theme/v2/Provider";
import { GivePillProps } from "./GiveTab.types";
import GiveText from "@shared/Text/GiveText";
export default function GivePill({
label,
value,
endItem,
startItem,
onClick,
selected,
hidden,
disabled,
variant,
tabSx,
dataTestId,
selectedTabSx,
}: GivePillProps) {
if (hidden) return null;
return (
<Container
direction="row"
variant={variant}
selected={selected}
disabled={disabled}
selectedTabSx={selectedTabSx}
onClick={() => onClick?.(value)}
sx={tabSx}
data-testid={dataTestId}
>
{startItem}
<GiveText variant="bodyS" data-testid={`give-pill-${value}`}>
{label}
</GiveText>
{endItem}
</Container>
);
}
const Container = styled(Stack, {
shouldForwardProp: (prop) =>
prop !== "selected" && prop !== "variant" && prop !== "selectedTabSx",
})<Omit<GivePillProps, "label" | "value">>(
({ theme, selected, variant, disabled, selectedTabSx }) => ({
gap: "8px",
alignItems: "center",
cursor: "pointer",
...(selected ? selectedTabSx : {}),
...(variant === "segmented"
? {
padding: "8px 12px",
borderRadius: "8px",
}
: { padding: "8px 16px", borderRadius: "40px" }),
...(variant === "gradient" &&
selected && {
background:
selectedTabSx?.backgroundColor ??
theme.palette.gradient?.["ocean-blue"]?.highlight,
"& p": {
color: selectedTabSx?.textColor ?? theme.palette.primitive?.blue[100],
},
}),
...(variant === "primary" &&
selected && {
background: theme.palette.primitive?.neutral[100],
"& p": {
color:
selectedTabSx?.textColor ?? theme.palette.primitive?.neutral[0],
},
}),
...(variant === "segmented" &&
selected && {
background: theme.palette.text.primary,
"& p": {
color:
selectedTabSx?.textColor ?? theme.palette.primitive?.neutral[0],
},
}),
...(!selected && {
"& p": {
color:
variant === "segmented"
? theme.palette.text.primary
: theme.palette.text.secondary,
},
"&:hover": {
...(variant === "segmented" && {
background: theme.palette.surface?.tertiary,
}),
"& p": {
color: theme.palette.text.primary,
},
},
}),
...(disabled && {
pointerEvents: "none",
"& p": {
color: theme.palette.text.tertiary,
},
}),
}),
);
|