Handy/src/components/settings/VolumeSlider.tsx
CJ Pais f87051f464
Add Internationalization Support (#437)
* basic i18n

* tweak

* translate app

* add linting to make sure we have translations

* run linter on pr

* format
2025-12-12 11:16:54 +07:00

30 lines
880 B
TypeScript

import React from "react";
import { useTranslation } from "react-i18next";
import { Slider } from "../ui/Slider";
import { useSettings } from "../../hooks/useSettings";
export const VolumeSlider: React.FC<{ disabled?: boolean }> = ({
disabled = false,
}) => {
const { t } = useTranslation();
const { getSetting, updateSetting } = useSettings();
const audioFeedbackVolume = getSetting("audio_feedback_volume") ?? 0.5;
return (
<Slider
value={audioFeedbackVolume}
onChange={(value: number) =>
updateSetting("audio_feedback_volume", value)
}
min={0}
max={1}
step={0.1}
label={t("settings.sound.volume.title")}
description={t("settings.sound.volume.description")}
descriptionMode="tooltip"
grouped
formatValue={(value) => `${Math.round(value * 100)}%`}
disabled={disabled}
/>
);
};