mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-24 12:56:21 +03:00
feat: more settings
This commit is contained in:
parent
c789c914aa
commit
e7564d4058
4 changed files with 130 additions and 4 deletions
|
@ -1,4 +1,5 @@
|
|||
import { CheckBox } from "./checkbox";
|
||||
import { inputStyle } from "./styles";
|
||||
|
||||
function SettingsCheckBox({ label, title, className, settingName, onClick }) {
|
||||
return (
|
||||
|
@ -10,10 +11,71 @@ function SettingsCheckBox({ label, title, className, settingName, onClick }) {
|
|||
onClick={(e) => {
|
||||
window.settings[settingName] = e.target.checked;
|
||||
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
4
src/components/styles.js
Normal 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 };
|
|
@ -13,6 +13,7 @@ import remarkStringify from "remark-stringify";
|
|||
import remarkGfm from "remark-gfm";
|
||||
import remarkMath from "remark-math";
|
||||
import { SettingsCheckBox } from "../components/settingsInputs";
|
||||
import { inputStyle } from "../components/styles";
|
||||
|
||||
function CreateNote() {
|
||||
const [preview, setPreview] = useState(false);
|
||||
|
@ -36,7 +37,6 @@ function CreateNote() {
|
|||
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 (
|
||||
<div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2">
|
||||
|
|
|
@ -1,4 +1,8 @@
|
|||
import { SettingsCheckBox } from "../components/settingsInputs";
|
||||
import {
|
||||
SettingsCheckBox,
|
||||
SettingsTextInput,
|
||||
SettingsSelectInput,
|
||||
} from "../components/settingsInputs";
|
||||
function Settings() {
|
||||
return (
|
||||
<div className="">
|
||||
|
@ -6,6 +10,32 @@ function Settings() {
|
|||
Настройки
|
||||
</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
|
||||
label="Редактирование в предпросмотре"
|
||||
title="Может вызывать необратимые изменения текста, например ломает теги кода"
|
||||
|
@ -19,6 +49,36 @@ function Settings() {
|
|||
checked={settings.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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue