suwayomi-material-you-webui/src/components/reader/ReaderSettingsOptions.tsx

/*
 * Copyright (C) Contributors to the Suwayomi project
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

import { List, ListItem, ListItemText, Switch } from '@mui/material';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import React from 'react';

interface IProps extends IReaderSettings {
    setSettingValue: (key: keyof IReaderSettings, value: string | boolean) => void;
}

export default function ReaderSettingsOptions({
    staticNav,
    loadNextOnEnding,
    readerType,
    showPageNumber,
    setSettingValue,
}: IProps) {
    return (
        <>
            <List>
                <ListItem>
                    <ListItemText primary="Static Navigation" />
                    <ListItemSecondaryAction>
                        <Switch
                            edge="end"
                            checked={staticNav}
                            onChange={(e) => setSettingValue('staticNav', e.target.checked)}
                        />
                    </ListItemSecondaryAction>
                </ListItem>
                <ListItem>
                    <ListItemText primary="Show page number" />
                    <ListItemSecondaryAction>
                        <Switch
                            edge="end"
                            checked={showPageNumber}
                            onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
                        />
                    </ListItemSecondaryAction>
                </ListItem>
                <ListItem>
                    <ListItemText primary="Load next chapter at ending" />
                    <ListItemSecondaryAction>
                        <Switch
                            edge="end"
                            checked={loadNextOnEnding}
                            onChange={(e) => setSettingValue('loadNextOnEnding', e.target.checked)}
                        />
                    </ListItemSecondaryAction>
                </ListItem>
                <ListItem>
                    <ListItemText primary="Reader Type" />
                    <Select
                        variant="standard"
                        value={readerType}
                        onChange={(e) => setSettingValue('readerType', e.target.value)}
                        sx={{ p: 0 }}
                    >
                        <MenuItem value="SingleLTR">Single Page (LTR)</MenuItem>
                        <MenuItem value="SingleRTL">Single Page (RTL)</MenuItem>
                        {/* <MenuItem value="SingleVertical">
                                       Vertical(WIP)
                                    </MenuItem> */}
                        <MenuItem value="DoubleLTR">Double Page (LTR)</MenuItem>
                        <MenuItem value="DoubleRTL">Double Page (RTL)</MenuItem>
                        <MenuItem value="Webtoon">Webtoon</MenuItem>
                        <MenuItem value="ContinuesVertical">Continues Vertical</MenuItem>
                        <MenuItem value="ContinuesHorizontalLTR">Horizontal (LTR)</MenuItem>
                        <MenuItem value="ContinuesHorizontalRTL">Horizontal (RTL)</MenuItem>
                    </Select>
                </ListItem>
            </List>
        </>
    );
}