import React from "react" ; import { Stack , IconButton , Tooltip } from "@chakra-ui/react" ; import { BsChevronLeft , BsChevronRight } from "react-icons/bs" ; import { useNavigate } from "react-router-dom" ; const Navigation = ( ) => { const navigate = useNavigate ( ) ; return ( < Stack direction = "row" spacing = "5px" w = "fit-content" h = "100%" alignItems = "center" > < Tooltip label = "Back" aria - label = "Back" > < IconButton w = "fit-content" variant = "light" aria - label = "Back" icon = { < BsChevronLeft size = { 16 } / > } onClick = { ( ) => navigate ( - 1 ) } /> < /Tooltip> < Tooltip label = "Forward" aria - label = "Forward" > < IconButton w = "fit-content" variant = "light" aria - label = "Forward" icon = { < BsChevronRight size = { 16 } / > } onClick = { ( ) => navigate ( 1 ) } /> < /Tooltip> < /Stack>); } ; export default Navigation ;