tethysfaceid/components/TextNode/TextNode.js

import Image from "next/image";


const TextNode = ({ data }) => {
    return data.map(({ description, type, className, image }) => {
        if (type == 'para') {
            return <p className={`margin-bottom-3x ${className}`} key={Math.random() + 'p'} dangerouslySetInnerHTML={{ __html: description }} />;
        }
        else if (type == 'head') {
            return <h1 className={`margin-bottom-1x ${className}`} key={Math.random() + 'head'}> {description}</ h1>;
        }
        else if (type == 'subhead') {
            return <h3 className={className} key={Math.random() + 'subhead'} > {description}</ h3>
        }
        else if (type == 'h4') {
            return <h4 className={className} key={Math.random() + 'h4'} > {description}</ h4>
        }
        else if (type == 'image') {
            return <div className={className} key={Math.random() + 'image'}><Image className={className} key={image.alt} {...image} /></div>
        }
        else if (type === 'list') {
            return (
                <ul className={className} key={Math.random()}>
                    {description.map(({ item, index }) => <li dangerouslySetInnerHTML={{ __html: item }} key={item + index} />)}
                </ul>
            );

        }
    });
}

export default TextNode;