76 lines
1.8 KiB
React
76 lines
1.8 KiB
React
import Box from "@mui/material/Box";
|
|
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
|
|
import Search from "@/Components/v1/Inputs/Search/index.jsx";
|
|
import timezones from "@/Utils/timezones.json";
|
|
|
|
// Utils
|
|
import { useTheme } from "@emotion/react";
|
|
import { PropTypes } from "prop-types";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useCallback, useMemo, useState } from "react";
|
|
const SettingsTimeZone = ({ HEADING_SX, handleChange, timezone }) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const [rawInput, setRawInput] = useState("");
|
|
|
|
const selectedTimezone = useMemo(
|
|
() => timezones.find((tz) => tz._id === timezone) ?? null,
|
|
[timezone]
|
|
);
|
|
|
|
const handleTimezoneChange = useCallback(
|
|
(newValue) => {
|
|
setRawInput("");
|
|
handleChange({
|
|
target: {
|
|
name: "timezone",
|
|
value: newValue?._id ?? "",
|
|
},
|
|
});
|
|
},
|
|
[handleChange]
|
|
);
|
|
|
|
return (
|
|
<ConfigBox>
|
|
<Box>
|
|
<Typography
|
|
component="h1"
|
|
variant="h2"
|
|
>
|
|
{t("settingsPage.timezoneSettings.title")}
|
|
</Typography>
|
|
<Typography sx={HEADING_SX}>
|
|
<Typography component="span">
|
|
{t("settingsPage.timezoneSettings.description")}
|
|
</Typography>
|
|
</Typography>
|
|
</Box>
|
|
<Stack gap={theme.spacing(20)}>
|
|
<Search
|
|
id="timezone"
|
|
label={t("settingsDisplayTimezone")}
|
|
options={timezones}
|
|
filteredBy="name"
|
|
value={selectedTimezone}
|
|
inputValue={rawInput}
|
|
handleInputChange={(val) => setRawInput(val)}
|
|
handleChange={handleTimezoneChange}
|
|
isAdorned={true}
|
|
unit="timezone"
|
|
/>
|
|
</Stack>
|
|
</ConfigBox>
|
|
);
|
|
};
|
|
|
|
SettingsTimeZone.propTypes = {
|
|
HEADING_SX: PropTypes.object,
|
|
handleChange: PropTypes.func,
|
|
timezone: PropTypes.string,
|
|
};
|
|
|
|
export default SettingsTimeZone;
|