@deep-foundation/deepcase/imports/cyto-message-textarea.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 React, { useRef, useState } from 'react';
import { IconButton, useColorModeValue, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverTrigger, Textarea, Spinner } from '@chakra-ui/react';
import { TiArrowBackOutline } from 'react-icons/ti';
import { IoIosSend } from 'react-icons/io';
import { BsCheck2 } from 'react-icons/bs';
import { useChackraColor } from './get-color';
export const MessageTextArea = React.memo(() => {
    const gray900 = useChackraColor('gray.900');
    const white = useChackraColor('white');
    const whiteAlpha = useChackraColor('whiteAlpha.400');
    const colorGrayToWhite = useColorModeValue(gray900, white);
    const colorWhiteToGray = useColorModeValue(white, gray900);
    const initialFocusRef = useRef();
    const [value, setValue] = useState('');
    const handleInputChange = (e) => {
        let inputValue = e.target.value;
        setValue(inputValue);
    };
    return (_jsxs(Popover, { isLazy: true, placement: 'right-start', initialFocusRef: initialFocusRef, colorScheme: colorGrayToWhite, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": 'replay to message button', variant: 'unstyled', colorScheme: 'current', isRound: true, sx: {
                        height: 5,
                        _hover: {
                            transform: 'scale(1.2)',
                        }
                    }, icon: _jsx(TiArrowBackOutline, {}) }) }), _jsxs(PopoverContent, { color: white, children: [_jsx(PopoverBody, { p: 0, color: white, children: _jsx(Textarea, { ref: initialFocusRef, colorScheme: colorWhiteToGray, value: value, onChange: handleInputChange, focusBorderColor: 'transparent', placeholder: 'Write the answer' }) }), _jsx(PopoverCloseButton, { size: 'lg', p: 1, right: 1, top: '110%', bg: colorWhiteToGray, _hover: {
                            bg: 'primary'
                        }, borderRadius: 'full', borderStyle: 'solid', borderColor: whiteAlpha, borderWidth: 1, onClick: () => console.log('send'), children: _jsx(IoIosSend, { color: colorGrayToWhite, size: '1.5em' }) }), _jsx(PopoverCloseButton, { p: 1, size: 'lg', right: 14, top: '110%', bg: colorWhiteToGray, _hover: {
                            bg: 'primary'
                        }, borderRadius: 'full', borderStyle: 'solid', borderColor: whiteAlpha, borderWidth: 1, onClick: () => console.log('spinner'), children: _jsx(Spinner, { color: 'primary', size: 'md', _hover: {
                                color: white
                            } }) }), _jsx(PopoverCloseButton, { size: 'lg', p: 1, right: 28, top: '110%', bg: colorWhiteToGray, _hover: {
                            bg: 'primary'
                        }, borderRadius: 'full', borderStyle: 'solid', borderColor: whiteAlpha, borderWidth: 1, onClick: () => console.log('check'), children: _jsx(BsCheck2, { color: colorGrayToWhite, size: '1.5em' }) })] })] }));
});
//# sourceMappingURL=cyto-message-textarea.js.map