105 lines
2.5 KiB
JavaScript
105 lines
2.5 KiB
JavaScript
import {
|
|
Box,
|
|
HStack,
|
|
Icon,
|
|
Text,
|
|
VStack,
|
|
useColorMode,
|
|
useRadio,
|
|
useRadioGroup,
|
|
} from "@chakra-ui/react";
|
|
import { FiChevronsRight } from "react-icons/fi";
|
|
import { TbArrowBadgeRightFilled } from "react-icons/tb";
|
|
|
|
function ChartsTabs({ selectedValue, setSelectedValue, days }) {
|
|
|
|
const { colorMode } = useColorMode();
|
|
// 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={{ base: "xs", md: "xs" }}
|
|
_checked={{
|
|
bg: colorMode === "light" ? "#DEDBEB" : "#fff",
|
|
color: "#000",
|
|
borderColor: "#4023A6",
|
|
}}
|
|
_focus={{
|
|
boxShadow: "outline",
|
|
}}
|
|
fontWeight={500}
|
|
py={{base:"3px",md: 1 }}
|
|
px={{base:"6px",md: 2 }}
|
|
>
|
|
{props.children}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// Setting defaultValue to '24 DayusHrs'
|
|
const options = ["24 Hrs", `${days} Days`, "12 Months"];
|
|
|
|
const { getRootProps, getRadioProps } = useRadioGroup({
|
|
name: "framework",
|
|
defaultValue: "24 Hrs", // Default tab is set to '24 Hrs'
|
|
onChange: (value) => setSelectedValue(value),
|
|
});
|
|
|
|
const group = getRootProps();
|
|
|
|
return (
|
|
<HStack alignItems={"center"} gap={1} ml={{base:2,md:0}}>
|
|
<Text
|
|
fontWeight={600}
|
|
display={"flex"}
|
|
alignItems={"center"}
|
|
fontSize={{ base: "xs", md: "xs" }}
|
|
color={colorMode === 'light'?'gray.400':"#fff"}
|
|
>
|
|
Last
|
|
<Icon
|
|
as={FiChevronsRight}
|
|
ms={1}
|
|
color={colorMode === "light" ? "gray.400" : "#fff"}
|
|
/>
|
|
</Text>
|
|
<HStack
|
|
bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
|
|
p={{base : 1,md : 1.5}}
|
|
rounded={"8px"}
|
|
justifyContent={{ base: "flex-end" }}
|
|
gap={{ base: 0, md: 1 }}
|
|
{...group}
|
|
ps={2}
|
|
>
|
|
{options.map((value) => {
|
|
const radio = getRadioProps({ value });
|
|
return (
|
|
<RadioCard key={value} {...radio}>
|
|
{value}
|
|
</RadioCard>
|
|
);
|
|
})}
|
|
</HStack>
|
|
|
|
|
|
|
|
</HStack>
|
|
);
|
|
}
|
|
|
|
export default ChartsTabs;
|