Reader overlay mobile bottom bar

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

@@ -0,0 +1,41 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+
+export const ButtonSelect = <Value extends string | number>({
+    value,
+    values,
+    setValue,
+    valueToDisplayData,
+}: {
+    value: Value;
+    values: Value[];
+    setValue: (value: Value) => void;
+    valueToDisplayData: ValueToDisplayData<Value>;
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <Stack sx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
+            {values.map((displayValue) => (
+                <Button
+                    key={displayValue}
+                    onClick={() => setValue(displayValue)}
+                    variant={displayValue === value ? 'contained' : 'outlined'}
+                    startIcon={valueToDisplayData[displayValue].icon}
+                >
+                    {t(valueToDisplayData[displayValue].title)}
+                </Button>
+            ))}
+        </Stack>
+    );
+};

src/modules/core/components/inputs/ButtonSelectInput.tsx

@@ -0,0 +1,23 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { ComponentProps } from 'react';
+
+import { ButtonSelect } from '@/modules/core/components/buttons/ButtonSelect.tsx';
+
+export const ButtonSelectInput = <Value extends string | number>({
+    label,
+    ...buttonSelectProps
+}: ComponentProps<typeof ButtonSelect<Value>> & { label: string }) => (
+    <Stack>
+        <Typography>{label}</Typography>
+        <ButtonSelect {...buttonSelectProps} />
+    </Stack>
+);