images_viewer/src/components/BookComponentsController.tsx

import React from 'react'
import styled from 'styled-components'
import {Button} from 'antd'
import ViewSwitcher from './ViewSwitcher'
import JumpControls from './JumpControls'
import {
    CaretLeftOutlined,
    CaretRightOutlined,
  } from '@ant-design/icons';

const ControlsContanter = styled.div`
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
`
export default function BookCoponentsController(props: any) {
    const {onPrevClick, prevDisable, onNextClick, nextDisable, ...restProps} = props

    return (
        <ControlsContanter>
            <JumpControls {...restProps}/>

            <Button
                onClick={()=>{
                    onPrevClick()
                }}
                disabled={prevDisable}
                style={{
                    marginRight: 8
                }}
                icon={<CaretLeftOutlined />}
            />
             
            <Button 
                onClick={()=>{
                    onNextClick()
                }}
                disabled={nextDisable}
                style={{
                    marginRight: 8
                }}
                icon={<CaretRightOutlined />}
            >
            </Button>
        
            <ViewSwitcher {...restProps}/>
            
        </ControlsContanter>            
    )
}