Function MessageComponent

examples/joint-react/src/App.tsx:137–201

({
    elementType,
    title,
    description,
    inputText,
    width,
    height,
    isSelected,
}: ElementWithSelected<MessageElement>)

// Define the message component
function MessageComponent({
    elementType,
    title,
    description,
    inputText,
    width,
    height,
    isSelected,
}: ElementWithSelected<MessageElement>) {
    let iconContent;
    let titleText;
    switch (elementType) {
        case 'alert': {
            iconContent = (
                <i className="fa-solid fa-triangle-exclamation text-rose-500 text-3xl mt-2"></i>
            );
            titleText = <span className="text-rose-500 font-bold">{title}</span>;
            break;
        }
        default: {
            iconContent = <i className="fa-solid fa-circle-info text-3xl mt-2"></i>;
            titleText = <span className="font-bold">{title}</span>;
            break;
        }
    }
    const id = useCellId();
    const setMessage = useUpdateElement<MessageElement>(id, 'inputText');
    return (
        <Highlighter.Stroke
            padding={10}
            rx={5}
            ry={5}
            strokeWidth={3}
            stroke={LIGHT}
            isHidden={!isSelected}
        >
            <foreignObject width={width} height={height} overflow="visible">
                <MeasuredNode>
                    <div className="flex flex-row border-1 border-solid border-white/20 text-white rounded-lg p-4 min-w-[250px] min-h-[100px] bg-gray-900 shadow-sm">
                        <div className="flex flex-col gap-2">
                            <div className="flex flex-row gap-2 items-start">
                                <div className="text-2xl">{iconContent}</div>
                                <div className="text-lg ml-2">
                                    {titleText}
                                    <div className="text-sm mt-1">{description}</div>
                                </div>
                            </div>
                            {/* Divider */}
                            <div className="border-1 border-dashed border-rose-white mt-2 opacity-10" />
                            <input
                                type="text"
                                value={inputText}
                                className="w-full border-1 border-solid border-rose-white rounded-lg p-2 mt-3"
                                placeholder="Type here..."
                                onChange={({ target: { value }}) => {
                                    setMessage(value);
                                }}
                            />