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 | 11x 11x 22x 21x 21x 109x 22x 21x 65x 22x | import { Text } from "@common/Text";
import { Stack, styled } from "@mui/material";
import { palette } from "@palette";
import { ChatsCircleIcon, TelegramLogoIcon } from "@phosphor-icons/react";
import { Tabs_Types } from "../types";
function Tabs({
tabs,
setTabs,
}: {
tabs: Tabs_Types;
setTabs: (data: Tabs_Types) => void;
}) {
const filterTabs = [
{
label: "Internal",
onClick: () => setTabs("Internal"),
selected: tabs === "Internal",
Icon: ChatsCircleIcon,
},
{
label: "Activity",
Icon: TelegramLogoIcon,
onClick: () => setTabs("Activity"),
selected: tabs === "Activity",
},
];
return (
<Container direction="row">
{filterTabs?.map(({ label, selected, onClick, Icon }) => {
return (
<SingleItemContainer
isSelected={selected}
onClick={onClick}
key={label}
data-testid={`tab-button-${label}`}
>
<Icon
size={18}
weight="fill"
color={selected ? "#292727" : "#8F8F8F"}
/>
<CustomText isSelected={selected}>{label}</CustomText>
</SingleItemContainer>
);
})}
</Container>
);
}
export default Tabs;
const Container = styled(Stack)(() => ({
width: "100%",
borderBottom: "1px solid",
borderBottomColor: palette.neutral[20],
}));
interface SingleItemContainerProps {
isSelected?: boolean;
}
const SingleItemContainer = styled(Stack, {
shouldForwardProp: (prop) => prop !== "isSelected",
})<SingleItemContainerProps>(({ isSelected }) => ({
cursor: "pointer",
flexDirection: "row",
alignItems: "center",
gap: "8px",
padding: "8.5px 32px 8.5px 32px",
borderBottom: "1px solid transparent",
...(isSelected && {
borderBottom: "1px solid #292727",
}),
}));
const CustomText = styled(Text, {
shouldForwardProp: (prop) => prop !== "isSelected",
})<SingleItemContainerProps>(({ isSelected }) => ({
fontSize: "14px",
fontWeight: "357",
color: "#8F8F8F",
...(isSelected && {
color: "#292727",
}),
}));
|