env-autosuggest/src/component/suggestionValueComponent/suggestionValueComponent.jsx

A React component that provides variable autosuggestion functionality with a rich text editor-like interface. This component allows users to type variables within curly braces and get intelligent suggestions based on predefined variables.

import React from 'react';
import { MdInfoOutline } from "react-icons/md";
import './suggestionValueComponent.css';

export default function SuggestionValueComponent({ singleSuggestionDetails }) {
    if (!singleSuggestionDetails) {
        return (
            <div className='suggestionValueMainContainer'>
                <div className='spacing-block'>
                    <div className='warning-title'>
                        <MdInfoOutline color='red' size={22} />
                        <span>Unresolved Variable</span>
                    </div>
                    <div className='warning-description'>Make sure the variable is in current Environement</div>
                </div>
            </div>
        )
    }
    return (
        <div className='suggestionValueMainContainer'>
            <div className='suggestionTypeContainer'>
                <div className='suggestionType'>INITIAL</div>
                <div className='suggestionTypeValue'>{singleSuggestionDetails?.initialValue?.trim() ? singleSuggestionDetails?.initialValue : `NA`}</div>
            </div>
            <div className='suggestionTypeContainer'>
                <div className='suggestionType'>CURRENT</div>
                <div className='suggestionTypeValue'>{singleSuggestionDetails?.currentValue?.trim() ? singleSuggestionDetails?.currentValue : 'NA'}</div>
            </div>
        </div>
    )
}