Yet another refacto. I improved many many mechanisms on this one including dnd. It is now end 2 end tested 🎉
27 lines
500 B
TypeScript
27 lines
500 B
TypeScript
import { Flex, FlexProps } from '@chakra-ui/react'
|
|
import { Item } from 'models'
|
|
import React from 'react'
|
|
|
|
type Props = {
|
|
item: Item
|
|
} & FlexProps
|
|
|
|
export const ItemNodeOverlay = ({ item, ...props }: Props) => {
|
|
return (
|
|
<Flex
|
|
px="4"
|
|
py="2"
|
|
rounded="md"
|
|
bgColor="white"
|
|
borderWidth="1px"
|
|
borderColor={'gray.300'}
|
|
w="212px"
|
|
pointerEvents="none"
|
|
shadow="lg"
|
|
{...props}
|
|
>
|
|
{item.content ?? 'Click to edit'}
|
|
</Flex>
|
|
)
|
|
}
|