63 lines
1.4 KiB
JavaScript
63 lines
1.4 KiB
JavaScript
import { Box, HStack, useRadio, useRadioGroup } from '@chakra-ui/react';
|
|
|
|
function ChartsTabs() {
|
|
// This function represents the RadioCard part
|
|
function RadioCard(props) {
|
|
const { getInputProps, getRadioProps } = useRadio(props);
|
|
const input = getInputProps();
|
|
const checkbox = getRadioProps();
|
|
|
|
return (
|
|
<Box as='label'>
|
|
<input {...input} />
|
|
<Box
|
|
{...checkbox}
|
|
cursor='pointer'
|
|
borderWidth='1px'
|
|
borderRadius='md'
|
|
boxShadow='md'
|
|
fontSize={"sm"}
|
|
_checked={{
|
|
bg: '#4023A6',
|
|
color: 'white',
|
|
borderColor: '#4023A6',
|
|
}}
|
|
_focus={{
|
|
boxShadow: 'outline',
|
|
}}
|
|
px={4}
|
|
py={1}
|
|
>
|
|
{props.children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// Setting defaultValue to 'Daily'
|
|
const options = ['Daily', 'Monthly', 'Yearly'];
|
|
|
|
const { getRootProps, getRadioProps } = useRadioGroup({
|
|
name: 'framework',
|
|
defaultValue: 'Daily', // Default tab is set to 'Daily'
|
|
onChange: console.log,
|
|
});
|
|
|
|
const group = getRootProps();
|
|
|
|
return (
|
|
<HStack {...group}>
|
|
{options.map((value) => {
|
|
const radio = getRadioProps({ value });
|
|
return (
|
|
<RadioCard key={value} {...radio}>
|
|
{value}
|
|
</RadioCard>
|
|
);
|
|
})}
|
|
</HStack>
|
|
);
|
|
}
|
|
|
|
export default ChartsTabs;
|