44 lines
1.6 KiB
TypeScript
44 lines
1.6 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: {
|
||
padding: 4,
|
||
},
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Stack>
|
||
);
|
||
};
|
||
|
||
export default CreateStatusButton;
|