50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
    
|
/*
|
||
|
|
Copyright 2022-2024 New Vector Ltd.
|
||
|
|
|
||
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
Please see LICENSE in the repository root for full details.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { ChangeEvent, FC, useCallback } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { Text } from "@vector-im/compound-web";
|
||
|
|
|
||
|
|
import { FieldRow, InputField } from "../input/Input";
|
||
|
|
import {
|
||
|
|
showHandRaisedTimer as showHandRaisedTimerSetting,
|
||
|
|
useSetting,
|
||
|
|
} from "./settings";
|
||
|
|
|
||
|
|
export const PreferencesSettingsTab: FC = () => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const [showHandRaisedTimer, setShowHandRaisedTimer] = useSetting(
|
||
|
|
showHandRaisedTimerSetting,
|
||
|
|
);
|
||
|
|
|
||
|
|
const onChangeSetting = useCallback(
|
||
|
|
(e: ChangeEvent<HTMLInputElement>) => {
|
||
|
|
setShowHandRaisedTimer(e.target.checked);
|
||
|
|
},
|
||
|
|
[setShowHandRaisedTimer],
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<h4>{t("settings.preferences_tab_h4")}</h4>
|
||
|
|
<Text>{t("settings.preferences_tab_body")}</Text>
|
||
|
|
<FieldRow>
|
||
|
|
<InputField
|
||
|
|
id="showHandRaisedTimer"
|
||
|
|
label={t("settings.preferences_tab_show_hand_raised_timer_label")}
|
||
|
|
description={t(
|
||
|
|
"settings.preferences_tab_show_hand_raised_timer_description",
|
||
|
|
)}
|
||
|
|
type="checkbox"
|
||
|
|
checked={showHandRaisedTimer}
|
||
|
|
onChange={onChangeSetting}
|
||
|
|
/>
|
||
|
|
</FieldRow>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|