feat: note option and send button

src/components/checkbox.jsx

@@ -0,0 +1,18 @@
+function CheckBox(props) {
+  return (
+    <div className={`form-check m-5 ${props.className}`}>
+      <input
+        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}
+        onClick={props.onClick}
+      />
+      <label className="form-check-label inline-block" htmlFor={props.id}>
+        {props.label}
+      </label>
+    </div>
+  );
+}
+
+export { CheckBox };

src/pages/create.jsx

@@ -1,10 +1,11 @@
 import { ButtonWithAction, IconWithButton } from "../components/button";
 import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
+import { CheckBox } from "../components/checkbox";
 
 function CreateNote() {
   return (
     <div>
-      <h2 className="font-medium leading-tight text-4xl mt-0 mb-2">
+      <h2 className="font-medium text-center lg:text-left leading-tight text-4xl mt-0 mb-2">
         Написать записку
       </h2>
       <textarea
@@ -35,18 +36,25 @@ function CreateNote() {
         placeholder="Ваша записка начинается здесь..."
         maxLength={5000}
       ></textarea>
-      <div className="grid grid-cols-2 justify-items-end w-full">
+      <div className="grid grid-cols-1 lg:grid-cols-2 justify-items-center w-full">
-        <ButtonWithAction className="m-5" onClick={""}>
+        <CheckBox
-          <IconWithButton
+          className="justify-self-center lg:justify-self-start"
-            reverse={true}
+          label="Публичная записка"
-            icon={
+          id="public"
-              <ChevronDoubleRightIcon className="transform translate-z-0 h-7 w-7" />
+          onClick={""}
-            }
+        />
-          >
+        <div className="justify-self-center lg:justify-self-end">
-            Отправить
+          <ButtonWithAction className="m-5" onClick={""}>
-          </IconWithButton>
+            <IconWithButton
-        </ButtonWithAction>
+              reverse={true}
-        <div className=""></div>
+              icon={
+                <ChevronDoubleRightIcon className="transform translate-z-0 h-7 w-7" />
+              }
+            >
+              Отправить
+            </IconWithButton>
+          </ButtonWithAction>
+        </div>
       </div>
     </div>
   );