129 lines
3.4 KiB
React
129 lines
3.4 KiB
React
// Components
|
|
import { Stack, Typography } from "@mui/material";
|
|
import { TabPanel } from "@mui/lab";
|
|
import ConfigBox from "../../../../../Components/ConfigBox";
|
|
import Checkbox from "../../../../../Components/Inputs/Checkbox";
|
|
import TextInput from "../../../../../Components/Inputs/TextInput";
|
|
import Select from "../../../../../Components/Inputs/Select";
|
|
import ImageField from "../../../../../Components/Inputs/Image";
|
|
import ColorPicker from "../../../../../Components/Inputs/ColorPicker";
|
|
import Progress from "../Progress";
|
|
// Utils
|
|
import { useTheme } from "@emotion/react";
|
|
import timezones from "../../../../../Utils/timezones.json";
|
|
|
|
const TabSettings = ({
|
|
tabValue,
|
|
form,
|
|
handleFormChange,
|
|
handleImageChange,
|
|
progress,
|
|
removeLogo,
|
|
errors,
|
|
}) => {
|
|
// Utils
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<TabPanel value={tabValue}>
|
|
<Stack gap={theme.spacing(10)}>
|
|
<ConfigBox>
|
|
<Stack>
|
|
<Typography component="h2">Access</Typography>
|
|
<Typography component="p">
|
|
If your status page is ready, you can mark it as published.
|
|
</Typography>
|
|
</Stack>
|
|
<Stack gap={theme.spacing(18)}>
|
|
<Checkbox
|
|
id="publish"
|
|
name="isPublished"
|
|
label={`Published and visible to the public`}
|
|
isChecked={form.isPublished}
|
|
onChange={handleFormChange}
|
|
/>
|
|
</Stack>
|
|
</ConfigBox>
|
|
<ConfigBox>
|
|
<Stack gap={theme.spacing(6)}>
|
|
<Typography component="h2">Basic Information</Typography>
|
|
<Typography component="p">
|
|
Define company name and the subdomain that your status page points to.
|
|
</Typography>
|
|
</Stack>
|
|
<Stack gap={theme.spacing(18)}>
|
|
<TextInput
|
|
id="companyName"
|
|
name="companyName"
|
|
type="text"
|
|
label="Company name"
|
|
value={form.companyName}
|
|
onChange={handleFormChange}
|
|
helperText={errors["companyName"]}
|
|
error={errors["companyName"] ? true : false}
|
|
/>
|
|
<TextInput
|
|
id="url"
|
|
name="url"
|
|
type="url"
|
|
label="Your status page address"
|
|
disabled
|
|
value={form.url}
|
|
onChange={handleFormChange}
|
|
/>
|
|
</Stack>
|
|
</ConfigBox>
|
|
<ConfigBox>
|
|
<Stack gap={theme.spacing(6)}>
|
|
<Typography component="h2">Timezone</Typography>
|
|
<Typography component="p">
|
|
Select the timezone that your status page will be displayed in.
|
|
</Typography>
|
|
</Stack>
|
|
<Stack gap={theme.spacing(6)}>
|
|
<Select
|
|
id="timezone"
|
|
name="timezone"
|
|
label="Display timezone"
|
|
items={timezones}
|
|
value={form.timezone}
|
|
onChange={handleFormChange}
|
|
/>
|
|
</Stack>
|
|
</ConfigBox>
|
|
<ConfigBox>
|
|
<Stack gap={theme.spacing(6)}>
|
|
<Typography component="h2">Appearance</Typography>
|
|
<Typography component="p">
|
|
Define the default look and feel of your public status page.
|
|
</Typography>
|
|
</Stack>
|
|
<Stack gap={theme.spacing(6)}>
|
|
<ImageField
|
|
id="logo"
|
|
src={form.logo?.src}
|
|
isRound={false}
|
|
onChange={handleImageChange}
|
|
/>
|
|
<Progress
|
|
isLoading={progress.isLoading}
|
|
progressValue={progress.value}
|
|
logo={form.logo}
|
|
logoType={form.logo?.type}
|
|
removeLogo={removeLogo}
|
|
/>
|
|
<ColorPicker
|
|
id="color"
|
|
name="color"
|
|
value={form.color}
|
|
onChange={handleFormChange}
|
|
/>
|
|
</Stack>
|
|
</ConfigBox>
|
|
</Stack>
|
|
</TabPanel>
|
|
);
|
|
};
|
|
|
|
export default TabSettings;
|