2022-01-12 09:10:59 +01:00
|
|
|
import { Flex, FlexProps } from '@chakra-ui/react'
|
2022-02-04 19:00:08 +01:00
|
|
|
import { Item } from 'models'
|
2022-05-13 09:18:25 -07:00
|
|
|
import React, { ReactNode } from 'react'
|
2022-01-12 09:10:59 +01:00
|
|
|
|
2022-02-02 08:05:02 +01:00
|
|
|
type Props = {
|
2022-02-04 19:00:08 +01:00
|
|
|
item: Item
|
2022-01-12 09:10:59 +01:00
|
|
|
} & FlexProps
|
|
|
|
|
2022-02-04 19:00:08 +01:00
|
|
|
export const ItemNodeOverlay = ({ item, ...props }: Props) => {
|
2022-01-12 09:10:59 +01:00
|
|
|
return (
|
|
|
|
<Flex
|
|
|
|
px="4"
|
|
|
|
py="2"
|
|
|
|
rounded="md"
|
2022-01-19 09:44:21 +01:00
|
|
|
bgColor="white"
|
|
|
|
borderWidth="1px"
|
|
|
|
borderColor={'gray.300'}
|
2022-01-12 09:10:59 +01:00
|
|
|
w="212px"
|
|
|
|
pointerEvents="none"
|
2022-01-19 09:44:21 +01:00
|
|
|
shadow="lg"
|
2022-01-12 09:10:59 +01:00
|
|
|
{...props}
|
|
|
|
>
|
2022-05-13 09:18:25 -07:00
|
|
|
{(item.content ?? 'Click to edit') as ReactNode}
|
2022-01-12 09:10:59 +01:00
|
|
|
</Flex>
|
|
|
|
)
|
|
|
|
}
|