feat: deal create, update, delete

src/app/deals/components/shared/CreateDealButton/CreateDealButton.module.css

@@ -0,0 +1,10 @@
+.create-button {
+    cursor: pointer;
+
+    @mixin light {
+        background-color: var(--color-light-white-blue);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-7);
+    }
+}

src/app/deals/components/shared/CreateDealButton/CreateDealButton.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { IconPlus } from "@tabler/icons-react";
+import { Card, Center, Group, Text, Transition } from "@mantine/core";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import CreateCardForm, { CreateDealForm } from "./components/CreateCardForm";
+import styles from "./CreateDealButton.module.css";
+
+const CreateCardButton = () => {
+    const [isCreating, setIsCreating] = useState(false);
+    const [isTransitionEnded, setIsTransitionEnded] = useState(true);
+    const { dealsCrud } = useDealsContext();
+
+    const onSubmit = (values: CreateDealForm) => {
+        dealsCrud.onCreate(values.name);
+        setIsCreating(prevState => !prevState);
+        setIsTransitionEnded(false);
+    };
+
+    return (
+        <Card
+            className={styles["create-button"]}
+            onClick={() => {
+                if (isCreating) return;
+                setIsCreating(prevState => !prevState);
+                setIsTransitionEnded(false);
+            }}>
+            {!isCreating && isTransitionEnded && (
+                <Center>
+                    <Group gap={"xs"}>
+                        <IconPlus />
+                        <Text>Добавить</Text>
+                    </Group>
+                </Center>
+            )}
+            <Transition
+                mounted={isCreating}
+                transition={"scale-y"}
+                onExited={() => setIsTransitionEnded(true)}>
+                {styles => (
+                    <div style={styles}>
+                        <CreateCardForm
+                            onCancel={() => setIsCreating(false)}
+                            onSubmit={onSubmit}
+                        />
+                    </div>
+                )}
+            </Transition>
+        </Card>
+    );
+};
+export default CreateCardButton;

src/app/deals/components/shared/CreateDealButton/components/CreateCardForm.tsx

@@ -0,0 +1,54 @@
+import { FC } from "react";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+
+export type CreateDealForm = {
+    name: string;
+};
+
+type Props = {
+    onSubmit: (values: CreateDealForm) => void;
+    onCancel: () => void;
+};
+
+const CreateCardForm: FC<Props> = ({ onSubmit, onCancel }) => {
+    const form = useForm<CreateDealForm>({
+        initialValues: {
+            name: "",
+        },
+        validate: {
+            name: value => !value && "Введите название",
+        },
+    });
+
+    return (
+        <form onSubmit={form.onSubmit(values => {
+            onSubmit(values);
+            form.reset();
+        })}>
+            <Stack>
+                <TextInput
+                    placeholder={"Название"}
+                    {...form.getInputProps("name")}
+                />
+                <Group wrap={"nowrap"}>
+                    <Button
+                        variant={"default"}
+                        w={"100%"}
+                        onClick={onCancel}>
+                        <IconX />
+                    </Button>
+                    <Button
+                        variant={"default"}
+                        w={"100%"}
+                        type={"submit"}>
+                        <IconCheck />
+                    </Button>
+                </Group>
+            </Stack>
+        </form>
+    );
+};
+
+export default CreateCardForm;