formatting
This commit is contained in:
@@ -1,10 +1,10 @@
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import { Modal } from "../../../components/modal/Modal";
|
||||
import { PrimaryButton } from "../../../components/button/PrimaryButton";
|
||||
import { SecondaryButton } from "../../../components/button/SecondaryButton";
|
||||
import { Input } from "../../../components/input/Input";
|
||||
import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
|
||||
import { createGroup } from "../../../redux/slices/groups";
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { Modal } from '../../../components/modal/Modal';
|
||||
import { PrimaryButton } from '../../../components/button/PrimaryButton';
|
||||
import { SecondaryButton } from '../../../components/button/SecondaryButton';
|
||||
import { Input } from '../../../components/input/Input';
|
||||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||||
import { createGroup } from '../../../redux/slices/groups';
|
||||
|
||||
interface ModalCreateProps {
|
||||
active: boolean;
|
||||
@@ -12,27 +12,63 @@ interface ModalCreateProps {
|
||||
}
|
||||
|
||||
const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
|
||||
const [name, setName] = useState<string>("");
|
||||
const [description, setDescription] = useState<string>("");
|
||||
const [name, setName] = useState<string>('');
|
||||
const [description, setDescription] = useState<string>('');
|
||||
const status = useAppSelector((state) => state.groups.statuses.create);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
if (status == "successful") {
|
||||
if (status == 'successful') {
|
||||
setActive(false);
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
return (
|
||||
<Modal className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white" onOpenChange={setActive} open={active} backdrop="blur" >
|
||||
<Modal
|
||||
className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
|
||||
onOpenChange={setActive}
|
||||
open={active}
|
||||
backdrop="blur"
|
||||
>
|
||||
<div className="w-[500px]">
|
||||
<div className="font-bold text-[30px]">Создать группу</div>
|
||||
<Input name="name" autocomplete="name" className="mt-[10px]" type="text" label="Название" onChange={(v) => { setName(v) }} placeholder="login" />
|
||||
<Input name="description" autocomplete="description" className="mt-[10px]" type="text" label="Описание" onChange={(v) => { setDescription(v) }} placeholder="login" />
|
||||
<Input
|
||||
name="name"
|
||||
autocomplete="name"
|
||||
className="mt-[10px]"
|
||||
type="text"
|
||||
label="Название"
|
||||
onChange={(v) => {
|
||||
setName(v);
|
||||
}}
|
||||
placeholder="login"
|
||||
/>
|
||||
<Input
|
||||
name="description"
|
||||
autocomplete="description"
|
||||
className="mt-[10px]"
|
||||
type="text"
|
||||
label="Описание"
|
||||
onChange={(v) => {
|
||||
setDescription(v);
|
||||
}}
|
||||
placeholder="login"
|
||||
/>
|
||||
|
||||
<div className="flex flex-row w-full items-center justify-end mt-[20px] gap-[20px]">
|
||||
<PrimaryButton onClick={() => { dispatch(createGroup({ name, description })) }} text="Создать" disabled={status == "loading"} />
|
||||
<SecondaryButton onClick={() => { setActive(false); }} text="Отмена" />
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
dispatch(createGroup({ name, description }));
|
||||
}}
|
||||
text="Создать"
|
||||
disabled={status == 'loading'}
|
||||
/>
|
||||
<SecondaryButton
|
||||
onClick={() => {
|
||||
setActive(false);
|
||||
}}
|
||||
text="Отмена"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@@ -40,4 +76,3 @@ const ModalCreate: FC<ModalCreateProps> = ({ active, setActive }) => {
|
||||
};
|
||||
|
||||
export default ModalCreate;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user