59 lines
1.3 KiB
React
59 lines
1.3 KiB
React
|
import React from 'react';
|
||
|
|
import styled from '@emotion/styled';
|
||
|
|
import { Divider, Stack } from '@mui/material';
|
||
|
|
|
||
|
|
const TabShell = styled('div')`
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-flow: row wrap;
|
||
|
|
justify-content: flex-end;
|
||
|
|
border: 1px solid black;
|
||
|
|
border-radius: 6px;
|
||
|
|
overflow: hidden;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const Tab = styled(Stack)`
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 2px 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const ToggleTabs = ({
|
||
|
|
tabs,
|
||
|
|
tabValue,
|
||
|
|
setTabValue,
|
||
|
|
tabColor
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<TabShell>
|
||
|
|
{tabs?.map((tab, index) => {
|
||
|
|
return (
|
||
|
|
<Stack
|
||
|
|
key={`${tab?.value}-stack`}
|
||
|
|
direction='row'
|
||
|
|
>
|
||
|
|
<Tab
|
||
|
|
key={tab?.value}
|
||
|
|
onClick={() => {
|
||
|
|
setTabValue(tab)
|
||
|
|
}}
|
||
|
|
style={{
|
||
|
|
backgroundColor: tabValue?.value === tab?.value ? tabColor : 'transparent',
|
||
|
|
color: tabValue?.value === tab?.value ? 'white' : 'black'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{tab?.label}
|
||
|
|
</Tab>
|
||
|
|
{index < tabs?.length - 1 && (
|
||
|
|
<Divider orientation="vertical" variant="middle" flexItem />
|
||
|
|
)}
|
||
|
|
</Stack>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</TabShell>
|
||
|
|
);
|
||
|
|
};
|