mirror of
https://github.com/artegoser/AnoPaper.git
synced 2024-11-05 20:43:57 +03:00
feat: note option and send button
This commit is contained in:
parent
0add454a2f
commit
45131e9cb9
2 changed files with 39 additions and 13 deletions
18
src/components/checkbox.jsx
Normal file
18
src/components/checkbox.jsx
Normal 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 };
|
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue