Pagination
() => {const PagButton = (props) => {const activeStyle = {bg: "brand.600",_dark: {bg: "brand.500",},color: "white",};return (<chakra.buttonmx={1}px={4}py={2}rounded="md"bg="white"color="gray.700"_dark={{color: "white",bg: "gray.800",}}opacity={props.disabled && 0.6}_hover={!props.disabled && activeStyle}cursor={props.disabled && "not-allowed"}{...(props.active && activeStyle)}>{props.children}</chakra.button>);};return (<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Flex><PagButton disabled>previous</PagButton><PagButton active>1</PagButton><PagButton>2</PagButton><PagButton>3</PagButton><PagButton>4</PagButton><PagButton>5</PagButton><PagButton>Next</PagButton></Flex></Flex>);};
() => {const PagButton = (props) => {const activeStyle = {bg: "brand.600",_dark: {bg: "brand.500",},color: "white",};return (<chakra.buttonmx={1}px={4}py={2}rounded="md"bg="white"_dark={{bg: "gray.800",}}color="gray.700"opacity={props.disabled && 0.6}_hover={!props.disabled && activeStyle}cursor={props.disabled && "not-allowed"}{...(props.active && activeStyle)}>{props.children}</chakra.button>);};return (<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Flex><PagButton><Iconas={IoIosArrowBack}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton><PagButton>1</PagButton><PagButton active>2</PagButton><PagButton>3</PagButton><PagButton>4</PagButton><PagButton>5</PagButton><PagButton><Iconas={IoIosArrowForward}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton></Flex></Flex>);};
() => {const PagButton = (props) => {const activeStyle = {bg: "brand.600",_dark: {bg: "brand.500",},color: "white",};return (<chakra.buttonmx={1}px={4}py={2}rounded="md"bg="white"_dark={{bg: "gray.800",}}color="gray.700"opacity={props.disabled && 0.6}_hover={!props.disabled && activeStyle}cursor={props.disabled && "not-allowed"}{...(props.active && activeStyle)}>{props.children}</chakra.button>);};const MButton = (props) => {const DoubleArrow = props.left ? ArrowLeftIcon : ArrowRightIcon;const [hovered, setHovered] = React.useState(false);const hoverColor = useColorModeValue("brand.800", "brand.700");const unHoverColor = useColorModeValue("gray.100", "gray.200");return (<chakra.aw={8}py={2}color="gray.700"_dark={{color: "gray.200",}}onMouseOver={() => setHovered(true)}onMouseOut={() => setHovered(false)}cursor="pointer"textAlign="center">{hovered ? (<Iconas={DoubleArrow}boxSize={3}cursor="pointer"color={hoverColor}/>) : (<Iconas={HiDotsHorizontal}color={unHoverColor}boxSize={4}opacity={0.5}/>)}</chakra.a>);};return (<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Flex><PagButton><Iconas={IoIosArrowBack}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton><PagButton>1</PagButton><MButton left /><PagButton>5</PagButton><PagButton>6</PagButton><PagButton active>7</PagButton><PagButton>8</PagButton><PagButton>9</PagButton><MButton right /><PagButton>50</PagButton><PagButton><Iconas={IoIosArrowForward}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton></Flex></Flex>);};
() => {const PagButton = (props) => {const activeStyle = {bg: "brand.600",_dark: {bg: "brand.500",},color: "white",};return (<chakra.buttonmx={1}px={4}py={2}rounded="md"bg="white"_dark={{bg: "gray.800",}}color="gray.700"opacity={props.disabled && 0.6}_hover={!props.disabled && activeStyle}cursor={props.disabled && "not-allowed"}{...(props.active && activeStyle)}>{props.children}</chakra.button>);};const MButton = (props) => {const DoubleArrow = props.left ? ArrowLeftIcon : ArrowRightIcon;const [hovered, setHovered] = React.useState(false);const color1 = useColorModeValue("brand.800", "brand.700");const color2 = useColorModeValue("gray.100", "gray.200");return (<chakra.aw={8}py={2}color="gray.700"_dark={{color: "gray.200",}}onMouseOver={() => setHovered(true)}onMouseOut={() => setHovered(false)}cursor="pointer"textAlign="center">{hovered ? (<Icon as={DoubleArrow} boxSize={3} cursor="pointer" color={color1} />) : (<Iconas={HiDotsHorizontal}color={color2}boxSize={4}opacity={0.5}/>)}</chakra.a>);};return (<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Flex><PagButton><Iconas={IoIosArrowBack}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton><PagButton>1</PagButton><PagButton active>2</PagButton><PagButton>3</PagButton><PagButton>4</PagButton><PagButton>5</PagButton><MButton right /><PagButton>50</PagButton><PagButton><Iconas={IoIosArrowForward}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton><Menu><MenuButton ml={1} as={Button} rightIcon={<ChevronDownIcon />}>10 / page</MenuButton><MenuList><MenuItem>20 / page</MenuItem><MenuItem>30 / page</MenuItem><MenuItem>40 / page</MenuItem><MenuItem>50 / page</MenuItem></MenuList></Menu></Flex></Flex>);};
() => {const PagButton = (props) => {const activeStyle = {bg: "brand.600",_dark: {bg: "brand.500",},color: "white",};return (<chakra.buttonmx={1}px={4}py={2}rounded="md"bg="white"_dark={{bg: "gray.800",}}color="gray.700"opacity={props.disabled && 0.6}_hover={!props.disabled && activeStyle}cursor={props.disabled && "not-allowed"}{...(props.active && activeStyle)}>{props.children}</chakra.button>);};const MButton = (props) => {const DoubleArrow = props.left ? ArrowLeftIcon : ArrowRightIcon;const [hovered, setHovered] = React.useState(false);const hoverColor = useColorModeValue("brand.800", "brand.700");const unHoverColor = useColorModeValue("gray.100", "gray.200");return (<chakra.aw={4}py={2}color="gray.700"_dark={{color: "gray.200",}}onMouseOver={() => setHovered(true)}onMouseOut={() => setHovered(false)}cursor="pointer"textAlign="center">{hovered ? (<Iconas={DoubleArrow}boxSize={3}cursor="pointer"color={hoverColor}/>) : (<Iconas={HiDotsHorizontal}color={unHoverColor}boxSize={4}opacity={0.5}/>)}</chakra.a>);};return (<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><HStack><PagButton><Iconas={IoIosArrowBack}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton><PagButton>1</PagButton><PagButton active>2</PagButton><PagButton>3</PagButton><PagButton>4</PagButton><PagButton>5</PagButton><MButton right /><PagButton>50</PagButton><PagButton><Iconas={IoIosArrowForward}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton><Menu><MenuButton ml={1} as={Button} rightIcon={<ChevronDownIcon />}>10 / page</MenuButton><MenuList><MenuItem>20 / page</MenuItem><MenuItem>30 / page</MenuItem><MenuItem>40 / page</MenuItem><MenuItem>50 / page</MenuItem></MenuList></Menu><HStack><Text wordBreak="unset">Go to:</Text><Input w="50px" /></HStack></HStack></Flex>);};
() => {const PagButton = (props) => {const activeStyle = {bg: "brand.600",_dark: {bg: "brand.500",},color: "white",};return (<chakra.buttonmx={1}px={4}py={2}rounded="md"bg="white"_dark={{bg: "gray.800",}}color="gray.700"opacity={props.disabled && 0.6}_hover={!props.disabled && activeStyle}cursor={props.disabled && "not-allowed"}{...(props.active && activeStyle)}display={props.p &&!props.active && {base: "none",sm: "block",}}>{props.children}</chakra.button>);};return (<Flexbg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}w="full"alignItems="center"justifyContent="center"><Flex><PagButton><Iconas={IoIosArrowBack}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton><PagButton p>1</PagButton><PagButton p active>2</PagButton><PagButton p>3</PagButton><PagButton p>4</PagButton><PagButton p>5</PagButton><PagButton><Iconas={IoIosArrowForward}color="gray.700"_dark={{color: "gray.200",}}boxSize={4}/></PagButton></Flex></Flex>);};
Proudly developed in by Anuoluwapo Abraham