@deep-foundation/deepcase/imports/popover-text/popover-text.js

[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Button, chakra, Popover, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverTrigger, Square, Text, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import { useChackraColor } from '../get-color';
const ButtonWord = React.memo(({ text = 'Trigger' }) => {
    return _jsx(Button, { variant: 'text', p: 0, height: 'auto', minWidth: 'min-content', bgColor: 'whiteAlpha.600', verticalAlign: 'baseline', fontWeight: 'inherit', fontSize: 'inherit', children: text });
});
const Trigger = chakra(ButtonWord);
const WordPopover = React.memo(({ text = '', popoverContent, }) => {
    const whiteAlpha = useChackraColor('whiteAlpha.600');
    const blackAlpha = useChackraColor('blackAlpha.300');
    const colorGrayToWhite = useColorModeValue(blackAlpha, whiteAlpha);
    return (_jsxs(Popover, { placement: 'top-start', isLazy: true, size: 'xs', children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: 'text', p: 0, lineHeight: 1, height: 'auto', minWidth: 'min-content', bgColor: colorGrayToWhite, verticalAlign: 'baseline', fontWeight: 'inherit', fontSize: 'inherit', children: text }) }), _jsxs(PopoverContent, { width: '100%', children: [_jsx(PopoverArrow, {}), _jsx(PopoverCloseButton, {}), _jsx(PopoverBody, { position: 'relative', width: '100%', height: '100%', children: popoverContent })] })] }));
});
const PopContent = React.memo(() => {
    return (_jsx(Square, { size: '5rem', bg: 'goldenrod', children: "I'm square, but I can be anything" }));
});
export const Example = React.memo(() => {
    return (_jsx(Box, { as: 'main', pos: 'relative', children: _jsxs(Text, { as: 'div', fontSize: 'sm', children: ["Lorem ipsum dolor sit amet, consectetur ", _jsx(WordPopover, { popoverContent: _jsx(PopContent, {}), text: 'catch' }), " elit. Sed ac justo ultrices lacus luctus mattis. Quisque hendrerit molestie feugiat. Fusce aliquet tellus sed ex congue, vel commodo mauris dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac ", _jsx(WordPopover, { popoverContent: _jsx(PopContent, {}), text: 'me' }), " egestas. Nulla eleifend ante nulla, sit amet iaculis lacus vulputate in. Proin ipsum lorem, vulputate ac mauris eu, facilisis aliquet magna. Vestibulum dignissim lacinia varius. Sed gravida quam vitae posuere ", _jsx(WordPopover, { popoverContent: _jsx(PopContent, {}), text: 'if' }), ". Phasellus lacus mauris, ", _jsx(WordPopover, { popoverContent: _jsx(PopContent, {}), text: 'you' }), " eu rhoncus a, pulvinar a ante. Aliquam eu nibh euismod enim porta semper at auctor nisl. Aliquam ", _jsx(WordPopover, { popoverContent: _jsx(PopContent, {}), text: 'can' }), " varius sapien vitae fermentum. Aliquam rhoncus erat et dui luctus sagittis. Phasellus quis tellus vulputate, pretium ligula ut, iaculis quam. Sed accumsan egestas bibendum. Sed sed finibus eros."] }) }));
});
//# sourceMappingURL=popover-text.js.map