feat: more settings

This commit is contained in:
Artemy 2023-04-03 19:38:03 +03:00
parent c789c914aa
commit e7564d4058
4 changed files with 130 additions and 4 deletions

View file

@ -1,4 +1,5 @@
import { CheckBox } from "./checkbox"; import { CheckBox } from "./checkbox";
import { inputStyle } from "./styles";
function SettingsCheckBox({ label, title, className, settingName, onClick }) { function SettingsCheckBox({ label, title, className, settingName, onClick }) {
return ( return (
@ -10,10 +11,71 @@ function SettingsCheckBox({ label, title, className, settingName, onClick }) {
onClick={(e) => { onClick={(e) => {
window.settings[settingName] = e.target.checked; window.settings[settingName] = e.target.checked;
localStorage.setObj("settings", window.settings); localStorage.setObj("settings", window.settings);
onClick(e); onClick && onClick(e);
}} }}
/> />
); );
} }
export { SettingsCheckBox }; function SettingsTextInput({
placeholder,
title,
label,
className,
settingName,
onChange,
secret,
}) {
return (
<div className="ml-2">
<label className="block mb-2 text-base font-medium text-gray-700 dark:text-white">
{label}
</label>
<input
className={`${inputStyle} m-2 ${className}`}
type={secret ? "password" : "text"}
placeholder={placeholder}
title={title}
defaultValue={window.settings[settingName]}
onChange={(e) => {
window.settings[settingName] = e.target.value;
localStorage.setObj("settings", window.settings);
onChange && onChange(e);
}}
/>
</div>
);
}
function SettingsSelectInput({
label,
className,
settingName,
options,
onChange,
}) {
return (
<div className="ml-2">
<label className="block mb-2 text-base font-medium text-gray-700 dark:text-white">
{label}
</label>
<select
className={`${inputStyle} m-2 ${className}`}
defaultValue={window.settings[settingName]}
onChange={(e) => {
window.settings[settingName] = e.target.value;
localStorage.setObj("settings", window.settings);
onChange && onChange(e);
}}
>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
);
}
export { SettingsCheckBox, SettingsTextInput, SettingsSelectInput };

4
src/components/styles.js Normal file
View file

@ -0,0 +1,4 @@
let inputStyle =
"form-control block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none";
export { inputStyle };

View file

@ -13,6 +13,7 @@ import remarkStringify from "remark-stringify";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import { SettingsCheckBox } from "../components/settingsInputs"; import { SettingsCheckBox } from "../components/settingsInputs";
import { inputStyle } from "../components/styles";
function CreateNote() { function CreateNote() {
const [preview, setPreview] = useState(false); const [preview, setPreview] = useState(false);
@ -36,7 +37,6 @@ function CreateNote() {
localStorage.setItem("NoteText", md); localStorage.setItem("NoteText", md);
} }
let inputStyle = `form-control block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none`;
return ( return (
<div> <div>
<div className="grid grid-cols-1 lg:grid-cols-2"> <div className="grid grid-cols-1 lg:grid-cols-2">

View file

@ -1,4 +1,8 @@
import { SettingsCheckBox } from "../components/settingsInputs"; import {
SettingsCheckBox,
SettingsTextInput,
SettingsSelectInput,
} from "../components/settingsInputs";
function Settings() { function Settings() {
return ( return (
<div className=""> <div className="">
@ -6,6 +10,32 @@ function Settings() {
Настройки Настройки
</h1> </h1>
<h1 className="text-center lg:text-left leading-tight text-xl font-bold">
Пользователь
</h1>
<SettingsTextInput
placeholder="Имя"
label="Имя пользователя"
settingName="userName"
/>
<SettingsTextInput
placeholder="Ссылка"
label="Ссылка на фото"
settingName="userPhoto"
/>
<SettingsTextInput
placeholder="Статус"
label="Статус пользователя"
settingName="userStatus"
/>
<h1 className="text-center lg:text-left leading-tight text-xl font-bold">
Заметки
</h1>
<SettingsCheckBox <SettingsCheckBox
label="Редактирование в предпросмотре" label="Редактирование в предпросмотре"
title="Может вызывать необратимые изменения текста, например ломает теги кода" title="Может вызывать необратимые изменения текста, например ломает теги кода"
@ -19,6 +49,36 @@ function Settings() {
checked={settings.publicNote} checked={settings.publicNote}
settingName="publicNote" settingName="publicNote"
/> />
<h1 className="text-center lg:text-left leading-tight text-xl font-bold">
Интерфейс
</h1>
<SettingsSelectInput
label="Язык"
settingName="language"
options={[
{
value: "ru",
label: "Русский",
},
{
value: "en",
label: "English",
},
]}
/>
<h1 className="text-center lg:text-left leading-tight text-xl font-bold">
Стороннее API
</h1>
<SettingsTextInput
placeholder="Ключ"
label="OpenAi API ключ"
settingName="openAiKey"
secret
/>
</div> </div>
); );
} }