feat: note option and send button

This commit is contained in:
Artemy 2022-10-17 14:27:30 +03:00
parent 0add454a2f
commit 45131e9cb9
2 changed files with 39 additions and 13 deletions

View file

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

View file

@ -1,10 +1,11 @@
import { ButtonWithAction, IconWithButton } from "../components/button"; import { ButtonWithAction, IconWithButton } from "../components/button";
import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
import { CheckBox } from "../components/checkbox";
function CreateNote() { function CreateNote() {
return ( return (
<div> <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> </h2>
<textarea <textarea
@ -35,18 +36,25 @@ function CreateNote() {
placeholder="Ваша записка начинается здесь..." placeholder="Ваша записка начинается здесь..."
maxLength={5000} maxLength={5000}
></textarea> ></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>
</div> </div>
); );