From 45131e9cb9be2297f03aac1425c6ba45252c9c62 Mon Sep 17 00:00:00 2001
From: Artemy <artegoser@gmail.com>
Date: Mon, 17 Oct 2022 14:27:30 +0300
Subject: [PATCH] feat: note option and send button

---
 src/components/checkbox.jsx | 18 ++++++++++++++++++
 src/pages/create.jsx        | 34 +++++++++++++++++++++-------------
 2 files changed, 39 insertions(+), 13 deletions(-)
 create mode 100644 src/components/checkbox.jsx

diff --git a/src/components/checkbox.jsx b/src/components/checkbox.jsx
new file mode 100644
index 0000000..9953360
--- /dev/null
+++ b/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 };
diff --git a/src/pages/create.jsx b/src/pages/create.jsx
index 41e2c24..8042d0f 100644
--- a/src/pages/create.jsx
+++ b/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">
-        <ButtonWithAction className="m-5" onClick={""}>
-          <IconWithButton
-            reverse={true}
-            icon={
-              <ChevronDoubleRightIcon className="transform translate-z-0 h-7 w-7" />
-            }
-          >
-            Отправить
-          </IconWithButton>
-        </ButtonWithAction>
-        <div className=""></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"
+          label="Публичная записка"
+          id="public"
+          onClick={""}
+        />
+        <div className="justify-self-center lg:justify-self-end">
+          <ButtonWithAction className="m-5" onClick={""}>
+            <IconWithButton
+              reverse={true}
+              icon={
+                <ChevronDoubleRightIcon className="transform translate-z-0 h-7 w-7" />
+              }
+            >
+              Отправить
+            </IconWithButton>
+          </ButtonWithAction>
+        </div>
       </div>
     </div>
   );