53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import React, { FC, useState } from "react";
|
|
import { Box, Group, Text } from "@mantine/core";
|
|
import BoardMenu from "@/app/deals/components/Board/BoardMenu";
|
|
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
|
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
|
|
import { BoardSchema } from "@/lib/client";
|
|
|
|
type Props = {
|
|
board: BoardSchema;
|
|
};
|
|
|
|
const Board: FC<Props> = ({ board }) => {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
const { onUpdateBoard } = useBoardsContext();
|
|
|
|
return (
|
|
<Group
|
|
miw={130}
|
|
px={"md"}
|
|
py={"xs"}
|
|
justify={"space-between"}
|
|
wrap={"nowrap"}
|
|
style={{ borderWidth: 1 }}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}>
|
|
<InPlaceInput
|
|
defaultValue={board.name}
|
|
onComplete={value => onUpdateBoard(board.id, { name: value })}
|
|
inputStyles={{
|
|
input: {
|
|
height: 25,
|
|
minHeight: 25,
|
|
},
|
|
}}
|
|
getChildren={startEditing => (
|
|
<>
|
|
<Box>
|
|
<Text>{board.name}</Text>
|
|
</Box>
|
|
<BoardMenu
|
|
isHovered={isHovered}
|
|
board={board}
|
|
startEditing={startEditing}
|
|
/>
|
|
</>
|
|
)}
|
|
/>
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
export default Board;
|