feat: save text of note

src/App.jsx

@@ -4,6 +4,12 @@ import Menu from "./components/menu";
 import CreateNote from "./pages/create";
 
 function App() {
+  Storage.prototype.setObj = function (key, obj) {
+    return this.setItem(key, JSON.stringify(obj));
+  };
+  Storage.prototype.getObj = function (key) {
+    return JSON.parse(this.getItem(key));
+  };
   return (
     <div className="grid grid-cols-4  lg:grid-cols-5  gap-10 text-black dark:text-white">
       <Menu />

src/components/button.jsx

@@ -14,12 +14,14 @@ function Button(props) {
 
 function ButtonWithAction(props) {
   return (
-    <div
+    <Link to="#">
-      onClick={props.onClick}
+      <div
-      className={`transition-transform w-48 ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105  p-2 pl-6 text-lg bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800 rounded-2xl ${props.className}`}
+        onClick={props.onClick}
-    >
+        className={`transition-transform w-48 ease-[cubic-bezier(.69,.58,.32,1.69)] hover:scale-105  p-2 pl-6 text-lg bg-zinc-100 hover:bg-zinc-300 dark:bg-zinc-600 dark:hover:bg-zinc-800 rounded-2xl ${props.className}`}
-      {props.children}
+      >
-    </div>
+        {props.children}
+      </div>
+    </Link>
   );
 }
 

src/components/checkbox.jsx

@@ -2,7 +2,7 @@ function CheckBox(props) {
   return (
     <div className={`form-check m-5 ${props.className}`}>
       <input
-        className="form-check-input appearance-none h-3 w-6 checked:bg-blue-600 checked:border-blue-600 pr-3 border border-gray-300 rounded-lg mr-1 checked:shadow-lg checked:shadow-blue-600 transition ease-out"
+        className="form-check-input appearance-none h-3 w-6 duration-500 checked:bg-blue-600 checked:border-blue-600 pr-3 border border-gray-300 rounded-lg mr-1 checked:shadow-lg checked:shadow-blue-600 transition ease-out"
         type="checkbox"
         id={props.id}
         defaultChecked={props.checked}

src/components/menu.jsx

@@ -3,6 +3,7 @@ import {
   MagnifyingGlassCircleIcon,
   PencilIcon,
   ExclamationCircleIcon,
+  Cog6ToothIcon,
 } from "@heroicons/react/24/outline";
 
 function Menu() {
@@ -33,6 +34,13 @@ function Menu() {
           Подробнее
         </IconWithButton>
       </Button>
+      <Button href="/options">
+        <IconWithButton
+          icon={<Cog6ToothIcon className="transform translate-z-0 h-7 w-7" />}
+        >
+          Настройки
+        </IconWithButton>
+      </Button>
     </div>
   );
 }

src/pages/create.jsx

@@ -7,8 +7,10 @@ import ReactMarkdown from "react-markdown";
 function CreateNote() {
   const [preview, setPreview] = useState(false);
   const [publicState, setPublicState] = useState(true);
-  const [text, setText] = useState("");
+  const [text, setText] = useState(localStorage.getItem("NoteText"));
+  const [name, setName] = useState(localStorage.getItem("NoteName"));
 
+  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">
@@ -23,44 +25,39 @@ function CreateNote() {
         />
       </div>
 
-      {preview && (
+      <input
-        <div className="w-full md">
+        type="text"
-          <ReactMarkdown>{text}</ReactMarkdown>
+        className={`mb-2 md:w-1/6 w-full ${inputStyle}`}
-        </div>
+        placeholder="Название заметки..."
-      )}
+        value={localStorage.getItem("NoteName")}
-
+        onChange={(e) => {
+          localStorage.setItem("NoteName", e.target.value);
+          setName(e.target.value);
+        }}
+      />
       <textarea
         className={`
-          form-control
+          ${inputStyle}
-          block
           w-full
-          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
-          m-0
-        focus:border-blue-600 
-          focus:outline-none
           ${preview ? "hidden" : ""}
         `}
         rows="10"
         placeholder="Ваша заметка начинается здесь. Можно использовать markdown..."
         maxLength={5000}
         onChange={(e) => {
+          localStorage.setItem("NoteText", e.target.value);
           setText(e.target.value);
         }}
-      ></textarea>
+      >
+        {localStorage.getItem("NoteText")}
+      </textarea>
+
+      {preview && (
+        <div className="w-full md">
+          <ReactMarkdown>{text}</ReactMarkdown>
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-2 justify-items-center w-full">
         <CheckBox
           className="justify-self-center lg:justify-self-start"
@@ -69,7 +66,7 @@ function CreateNote() {
           onClick={() => {
             setPublicState(!publicState);
           }}
-          checked
+          checked={localStorage.getItem("private")}
         />
         <div className="justify-self-center lg:justify-self-end">
           <ButtonWithAction className="m-5" onClick={""}>