feat: board creation and actions dropdown

src/app/deals/components/Board/Board.tsx

@@ -1,5 +1,7 @@
-import React, { FC } from "react";
-import { Box } from "@mantine/core";
+import React, { FC, useState } from "react";
+import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
+import { Box, Group, Menu, Text } from "@mantine/core";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { BoardSchema } from "@/lib/client";
 
 type Props = {
@@ -7,7 +9,54 @@ type Props = {
 };
 
 const Board: FC<Props> = ({ board }) => {
-    return <Box miw={100} style={{ borderWidth: 1, margin: 0 }}>{board.name}</Box>;
+    const [isHovered, setIsHovered] = useState(false);
+    const { selectedBoard } = useBoardsContext();
+
+    return (
+        <Group
+            miw={130}
+            px={"md"}
+            py={"xs"}
+            justify={"space-between"}
+            wrap={"nowrap"}
+            style={{ borderWidth: 1 }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}>
+            <Text>{board.name}</Text>
+            <Menu>
+                <Menu.Target>
+                    <Box
+                        style={{
+                            opacity:
+                                isHovered || selectedBoard?.id === board.id
+                                    ? 1
+                                    : 0,
+                            cursor: "pointer",
+                        }}
+                        onClick={e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }}>
+                        <IconDotsVertical size={16} />
+                    </Box>
+                </Menu.Target>
+                <Menu.Dropdown>
+                    <Menu.Item>
+                        <Group wrap={"nowrap"}>
+                            <IconEdit />
+                            <Text>Переименовать</Text>
+                        </Group>
+                    </Menu.Item>
+                    <Menu.Item>
+                        <Group wrap={"nowrap"}>
+                            <IconTrash />
+                            <Text>Удалить</Text>
+                        </Group>
+                    </Menu.Item>
+                </Menu.Dropdown>
+            </Menu>
+        </Group>
+    );
 };
 
 export default Board;