TimeTravelButtons.js

import React from "react"
import styled from "styled-components"
import { useRecoilState } from "recoil"
import { currentDateState } from "../../state/app"
import { addDays, subDays } from "date-fns"
import Button from "../ui/Button"

const StyledTimeTravelButtons = styled("div")`
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 50;

    .separator {
        height: 100%;
        width: 1px;
        background-color: #bee3f8;
    }
`

const TimeTravelButtons = () => {
    const DAYS_JUMP = 10
    const [currentDate, setCurrentDate] = useRecoilState(currentDateState)

    const jumpForward = (e) => {
        setCurrentDate(addDays(currentDate, DAYS_JUMP))
    }

    const jumpBackward = (e) => {
        setCurrentDate(subDays(currentDate, DAYS_JUMP))
    }

    return (
        <StyledTimeTravelButtons>
            <Button onClick={jumpBackward}>&lt;&lt; Backward</Button>
            <div className="separator"></div>
            <Button onClick={jumpForward}>Forward &gt;&gt;</Button>
        </StyledTimeTravelButtons>
    )
}

export default TimeTravelButtons