40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import { IconPlus } from "@tabler/icons-react";
|
|
import { Box, Flex, rem } from "@mantine/core";
|
|
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
|
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
|
|
import styles from "./CreateBoardButton.module.css";
|
|
|
|
const CreateBoardButton = () => {
|
|
const { boardsCrud } = useBoardsContext();
|
|
|
|
return (
|
|
<Flex style={{ borderBottom: "2px solid gray" }}>
|
|
<InPlaceInput
|
|
placeholder={"Название доски"}
|
|
onComplete={boardsCrud.onCreate}
|
|
getChildren={startEditing => (
|
|
<Box
|
|
onClick={startEditing}
|
|
className={styles["create-button"]}>
|
|
<IconPlus />
|
|
</Box>
|
|
)}
|
|
inputStyles={{
|
|
wrapper: {
|
|
marginRight: "var(--mantine-spacing-xs)",
|
|
paddingBlock: rem(3),
|
|
paddingLeft: "var(--mantine-spacing-xs)",
|
|
backgroundColor:
|
|
"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))",
|
|
borderTopLeftRadius: "var(--mantine-spacing-xs)",
|
|
borderTopRightRadius: "var(--mantine-spacing-xs)",
|
|
},
|
|
}}
|
|
modalTitle={"Создание доски"}
|
|
/>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default CreateBoardButton;
|