images_viewer/src/components/ViewSwitcher.tsx

import React, {useCallback} from 'react'
import {Select} from 'antd'
import {IBookContext, getBookViewModes} from './BookComponent'


const {Option} = Select

export default function ViewSwitcher(props: IBookContext) {
    const {mode, setBookContextState} = props

    const viewModeChange = useCallback((mode) => {
        setBookContextState({
            mode,
            pagesToTurn: getBookViewModes().find(item=> item.value === mode)?.pagesToTurn || 0
        })
    },[setBookContextState])

    return (
        <Select value={mode} onSelect={viewModeChange}>
            {
                getBookViewModes().map((item: any)=>{
                    return <Option value={item.value} key={item.value}>{item.text}</Option>
                })
            }
        </Select> 
    )
}