feat: more settings

src/components/settingsInputs.jsx

@@ -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 };

src/components/styles.js

@@ -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 };

src/pages/create.jsx

@@ -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">

src/pages/settings.jsx

@@ -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>
   );
 }