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 106 107 108 | 2x 8x 3x 2x 2x 3x | import * as React from "react";
// @mui
import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import { styled } from "@mui/material/styles";
// icons
import { AddCircleFilledIcon, SubtractIcon } from "@assets/rebrandIcons";
// localization
// import { useTranslation } from "react-i18next";
// import { namespaces } from "localization/resources/i18n.constants";
const Container = styled("div", {
shouldForwardProp: (prop) => prop !== "active",
})<{ active: boolean }>(({ theme, active }) => ({
height: 24,
display: "inline-flex",
// borderRadius: "4px",
alignItems: "center",
color: theme.palette.neutral[500],
"&:hover": {
color: theme.palette.neutral[800],
},
"&:not(:last-of-type)": {
marginRight: "24px",
},
...(active && {
padding: "0px 12px 0px 8px",
// borderLeft: `4px solid ${theme.palette.primary.main}`,
}),
svg: {
marginRight: "-2px",
},
}));
const btnStyle = {
fontWeight: 350,
fontSize: "14px",
display: "flex",
gap: "12px",
cursor: "pointer",
alignItems: "center",
textTransform: "capitalize",
color: `#8F8F8F`, // neutral[70]
"&:first-of-type": {
"&:hover": {
color: `#575353`, // neutral[80],
"svg > path": {
fill: `#575353`, // neutral[80]
},
},
},
"&:last-of-type": {
color: `#403D3D`, // neutral[90]
},
"& > sup": {
fontSize: "8px",
},
};
const FilterButton = ({
onClick,
title,
onDisableFilter,
active,
children,
}: {
onClick?: React.MouseEventHandler;
title?: string;
onDisableFilter?: React.MouseEventHandler;
active: boolean;
children?: React.ReactNode;
}) => {
// const { t } = useTranslation(namespaces.common);
return (
<Container active={active}>
<Box
onClick={active ? onDisableFilter : onClick}
sx={btnStyle}
data-testid={`${title}-filter-button`}
>
{active ? <SubtractIcon width={15} /> : <AddCircleFilledIcon />}
{/* {t(`filters.${title}`,{ ns: namespaces.common })} */}
<Box component="span">{title}</Box>
</Box>
<Divider
orientation="vertical"
variant="middle"
flexItem
sx={{ mx: 0.5, display: active ? "block" : "none" }}
/>
<Box
sx={{ ...btnStyle, display: active ? "block" : "hidden" }}
onClick={onClick}
>
{active && children}
</Box>
</Container>
);
};
export default FilterButton;
|