46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import React from "react";
|
||
import { IconPlus } from "@tabler/icons-react";
|
||
import { Box, Center, Group, Stack, Text } from "@mantine/core";
|
||
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
|
||
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
|
||
import useIsMobile from "@/hooks/useIsMobile";
|
||
import styles from "./CreateStatusButton.module.css";
|
||
|
||
const CreateStatusButton = () => {
|
||
const { onCreateStatus } = useStatusesContext();
|
||
const isMobile = useIsMobile();
|
||
|
||
return (
|
||
<Stack>
|
||
<Box className={styles.container}>
|
||
<InPlaceInput
|
||
placeholder={"Название колонки"}
|
||
onComplete={onCreateStatus}
|
||
getChildren={startEditing => (
|
||
<Center
|
||
p={"sm"}
|
||
onClick={() => startEditing()}>
|
||
<Group
|
||
gap={"xs"}
|
||
wrap={"nowrap"}
|
||
align={"start"}>
|
||
<IconPlus />
|
||
{isMobile && <Text>Добавить</Text>}
|
||
</Group>
|
||
</Center>
|
||
)}
|
||
modalTitle={"Создание колонки"}
|
||
inputStyles={{
|
||
wrapper: {
|
||
paddingInline: "var(--mantine-spacing-md)",
|
||
paddingBlock: "var(--mantine-spacing-xs)",
|
||
},
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Stack>
|
||
);
|
||
};
|
||
|
||
export default CreateStatusButton;
|