feat: attribute selects and options editors

src/app/attributes/modals/AttrSelectEditorModal/components/CreateOptionButton.tsx

@@ -0,0 +1,37 @@
+import { IconCheck } from "@tabler/icons-react";
+import { Flex, TextInput } from "@mantine/core";
+import { useSelectEditorContext } from "@/app/attributes/modals/AttrSelectEditorModal/contexts/SelectEditorContext";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
+import InlineButton from "@/components/ui/InlineButton/InlineButton";
+
+const CreateOptionButton = () => {
+    const {
+        optionsActions: {
+            isCreatingOption,
+            createOptionForm,
+            onStartCreating,
+            onFinishCreating,
+        },
+    } = useSelectEditorContext();
+
+    if (!isCreatingOption) {
+        return (
+            <InlineButton onClick={onStartCreating}>
+                Добавить опцию
+            </InlineButton>
+        );
+    }
+
+    return (
+        <Flex gap={"xs"}>
+            <TextInput {...createOptionForm.getInputProps("name")} flex={1} />
+            <ActionIconWithTip
+                tipLabel={"Сохранить"}
+                onClick={onFinishCreating}>
+                <IconCheck />
+            </ActionIconWithTip>
+        </Flex>
+    );
+};
+
+export default CreateOptionButton;