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 | 45x 37x 37x 45x 37x 45x 119x 37x | import { Stack } from "@mui/material";
import GiveTabs from "@shared/Tabs/GiveTabs";
import GiveText from "@shared/Text/GiveText";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { styled } from "@theme/v2/Provider";
import { memo } from "react";
interface TabSectionProps {
title: string;
selectedTab: any;
tabItems: any[];
onClick: (e: any) => void;
}
const TabSection = ({
selectedTab,
tabItems,
onClick,
title,
}: TabSectionProps) => {
const { isMobileView } = useCustomThemeV2();
return (
<TabSectionContainer isMobileView={isMobileView}>
<TabSectionTitle variant="bodyL" color="primary">
{title}
</TabSectionTitle>
<GiveTabs
selected={selectedTab}
containerSx={{
minWidth: isMobileView ? "100%" : "60%",
justifyContent: "space-around",
padding: "4px",
flex: 1,
}}
tabSx={{ flex: 1, justifyContent: "center" }}
items={tabItems}
onClick={onClick}
type="segmented"
/>
</TabSectionContainer>
);
};
export default memo(TabSection);
const TabSectionTitle = styled(GiveText)(({ theme }) => {
return {
flex: 1,
};
});
const TabSectionContainer = styled(Stack, {
shouldForwardProp: (prop) => prop != "isMobileView",
})<{ isMobileView: boolean }>(({ isMobileView }) => {
return {
flexDirection: isMobileView ? "column" : "row",
gap: "24px",
alignItems: isMobileView ? "flex-start" : "center",
};
});
|