feat: md support

package.json

@@ -12,6 +12,7 @@
     "@heroicons/react": "^2.0.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.3",
     "react-router-dom": "^6.4.2"
   },
   "devDependencies": {

src/components/checkbox.jsx

@@ -5,7 +5,7 @@ function CheckBox(props) {
         className="form-check-input appearance-none h-3 w-5 checked:bg-blue-600 checked:border-blue-600 pr-3 border border-gray-300 rounded-lg mr-1"
         type="checkbox"
         id={props.id}
-        defaultChecked={true}
+        defaultChecked={props.checked}
         onClick={props.onClick}
       />
       <label className="form-check-label inline-block" htmlFor={props.id}>

src/pages/create.jsx

@@ -1,15 +1,33 @@
 import { ButtonWithAction, IconWithButton } from "../components/button";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
 import { CheckBox } from "../components/checkbox";
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
 
 function CreateNote() {
+  const [preview, setPreview] = useState(false);
+  const [text, setText] = useState("");
+
   return (
     <div>
+      <div className="grid grid-cols-1 lg:grid-cols-2">
         <h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
           Написать записку
         </h2>
+        <CheckBox
+          className="justify-self-center lg:justify-self-end"
+          label="Предпросмотр"
+          id="preview"
+          onClick={() => setPreview(!preview)}
+        />
+      </div>
+
+      <ReactMarkdown className={!preview ? "w-full hidden" : "w-full"}>
+        {text}
+      </ReactMarkdown>
+
       <textarea
-        className="
+        className={`
           form-control
           block
           w-full
@@ -31,10 +49,14 @@ function CreateNote() {
           m-0
         focus:border-blue-600 
           focus:outline-none
-        "
+          ${preview ? "hidden" : ""}
+        `}
         rows="10"
-        placeholder="Ваша записка начинается здесь..."
+        placeholder="Ваша записка начинается здесь. Можно использовать markdown..."
         maxLength={5000}
+        onChange={(e) => {
+          setText(e.target.value);
+        }}
       ></textarea>
       <div className="grid grid-cols-1 lg:grid-cols-2 justify-items-center w-full">
         <CheckBox
@@ -42,6 +64,7 @@ function CreateNote() {
           label="Публичная записка"
           id="public"
           onClick={""}
+          checked
         />
         <div className="justify-self-center lg:justify-self-end">
           <ButtonWithAction className="m-5" onClick={""}>