47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { Text, Slider, Stack } from '@mantine/core';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { useConfig } from '../../tools/state';
|
|
|
|
export function OpacitySelector() {
|
|
const { config, setConfig } = useConfig();
|
|
const { t } = useTranslation('settings/customization/opacity-selector');
|
|
|
|
const MARKS = [
|
|
{ value: 10, label: '10' },
|
|
{ value: 20, label: '20' },
|
|
{ value: 30, label: '30' },
|
|
{ value: 40, label: '40' },
|
|
{ value: 50, label: '50' },
|
|
{ value: 60, label: '60' },
|
|
{ value: 70, label: '70' },
|
|
{ value: 80, label: '80' },
|
|
{ value: 90, label: '90' },
|
|
{ value: 100, label: '100' },
|
|
];
|
|
|
|
const setConfigOpacity = (opacity: number) => {
|
|
setConfig({
|
|
...config,
|
|
settings: {
|
|
...config.settings,
|
|
appOpacity: opacity,
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Stack spacing="xs">
|
|
<Text>{t('label')}</Text>
|
|
<Slider
|
|
defaultValue={config.settings.appOpacity || 100}
|
|
step={10}
|
|
min={10}
|
|
marks={MARKS}
|
|
styles={{ markLabel: { fontSize: 'xx-small' } }}
|
|
onChange={(value) => setConfigOpacity(value)}
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|