feat: boards and statuses editing and creating for mobiles

src/modals/EnterNameModal/EnterNameModal.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Button, Flex, rem, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { ContextModalProps } from "@mantine/modals";
+
+type Props = {
+    onComplete: (value: string) => void;
+    defaultValue?: string;
+};
+
+type FormType = {
+    name?: string;
+};
+
+const EnterNameModal = ({
+    id,
+    context,
+    innerProps,
+}: ContextModalProps<Props>) => {
+    const form = useForm<FormType>({
+        initialValues: {
+            name: innerProps.defaultValue,
+        },
+        validate: {
+            name: name => !name && "Введите название",
+        },
+    });
+
+    const onSubmit = (values: FormType) => {
+        innerProps.onComplete(values.name!);
+        context.closeModal(id);
+    };
+
+    return (
+        <form onSubmit={form.onSubmit(values => onSubmit(values))}>
+            <Flex
+                gap={rem(10)}
+                direction={"column"}>
+                <TextInput {...form.getInputProps("name")} />
+                <Button
+                    variant={"default"}
+                    type={"submit"}>
+                    Сохранить
+                </Button>
+            </Flex>
+        </form>
+    );
+};
+
+export default EnterNameModal;