Reader overlay desktop nav bar

src/modules/core/components/buttons/ValueRotationButton.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+import Button from '@mui/material/Button';
+import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+
+export const ValueRotationButton = <Value extends string | number>({
+    value,
+    values,
+    setValue,
+    valueToDisplayData,
+}: {
+    value: Value;
+    values: Value[];
+    setValue: (value: Value) => void;
+    valueToDisplayData: ValueToDisplayData<Value>;
+}) => {
+    const { t } = useTranslation();
+
+    const indexOfValue = useMemo(() => values.indexOf(value), [value, values]);
+
+    return (
+        <Button
+            onClick={() => setValue(values[(indexOfValue + 1) % values.length])}
+            sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
+            variant="contained"
+            startIcon={valueToDisplayData[value].icon}
+            size="large"
+        >
+            {t(valueToDisplayData[value].title)}
+        </Button>
+    );
+};