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 | 4x 59x 59x 59x 59x 94x 59x 4x 474x 94x | import React, { useState } from "react";
import { Box, Stack, styled } from "@mui/material";
import { palette } from "@palette";
import { HiddenComponent } from "@containers/HiddenComponent";
interface TabsProps {
sectionsRef: React.RefObject<(HTMLDivElement | null)[]>;
tabs: { label: string; hidden: boolean; disabled: boolean }[];
}
const PermissionTabs = ({ tabs, sectionsRef }: TabsProps) => {
const [tab, setTab] = useState<number>(0);
const labels = {
acquirer: "Acquirer ",
enterprise: "Provider",
submerchant: "Merchant",
merchant: "Merchant",
user: "User",
};
const handleClick = (index: number, disabled: boolean) => {
if (disabled) return;
setTab(index);
sectionsRef.current?.[index]?.scrollIntoView({
behavior: "smooth",
block: "center",
});
};
return (
<TabsContainer direction="row">
{tabs.map(({ label, hidden, disabled }, index) => (
<HiddenComponent key={label} hidden={hidden}>
<TabItem
data-testid={`permissions-list-${label}-tab`}
selected={tab === index}
disabled={disabled}
onClick={() => handleClick(index, disabled)}
>
{labels[label as keyof typeof labels]}
</TabItem>
</HiddenComponent>
))}
</TabsContainer>
);
};
const TabsContainer = styled(Stack)(() => ({
padding: "4px 16px 0px 16px",
borderBottom: `1px solid ${palette.liftedWhite[200]}`,
}));
const TabItem = styled(Box, {
shouldForwardProp: (prop) => prop !== "selected" && prop !== "disabled",
})<{ selected: boolean; disabled: boolean }>(({ selected, disabled }) => ({
padding: "4px 16px",
color: palette.gray[300],
fontSize: "14px",
fontWeight: 350,
lineHeight: "16.8px",
background: "inherit",
border: "none",
boxShadow: "none",
textTransform: "capitalize",
textDecoration: "none",
cursor: "pointer",
userSelect: "none",
...(selected &&
!disabled && {
borderBottom: `2px solid ${palette.black[300]}`,
color: palette.black[300],
cursor: "default",
}),
}));
export default PermissionTabs;
|