Text.tsx

import React from "react"
import { twMerge } from "tailwind-merge"
import { InformationCircleIcon } from "@heroicons/react/outline"
import { Button } from "@onegeo-suite/gatsby-theme-onegeo"

interface IText {
    title?: string
    content?: string
    className?: string
    action?: {
        name?: string
        url?: string
        className?: string
    }
    options?: any
}

const Text = (props: IText) => {
    const { title, content, className = "", action } = props
    const options = props.options ?? {}
    const oClass = options.class || {}
    const oTooltip = options.tooltip || {}

    return (
        <div className={twMerge(oClass.main, className)}>
            {title && (
                <h2
                    className={twMerge(
                        "font-extrabold sm:text-4xl",
                        oClass.title
                    )}
                >
                    {title}
                    {oTooltip.title ? (
                        <span
                            className="tooltip tooltip-info text-info ml-2 font-normal"
                            data-tip={oTooltip.title}
                        >
                            <InformationCircleIcon className=" h-5 w-5 cursor-pointer" />
                        </span>
                    ) : null}
                </h2>
            )}
            {content && (
                <>
                    <span
                        className={twMerge(
                            "pt-10 text-justify text-xl leading-8 ",
                            oClass.content
                        )}
                        dangerouslySetInnerHTML={{ __html: content }}
                    />
                    {oTooltip.content ? (
                        <span
                            className="tooltip tooltip-base-100 tooltip-color:tooltip-base-100!"
                            data-tip={oTooltip.content}
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                strokeWidth={2}
                                className="text-secondary h-5 w-5 cursor-pointer"
                            >
                                <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
                                />
                            </svg>
                        </span>
                    ) : (
                        <></>
                    )}
                </>
            )}
            {action && action.name !== "" ? (
                <Button
                    {...action}
                    className={twMerge(
                        "mt-10",
                        action.className,
                        oClass.action
                    )}
                    {...options.action}
                />
            ) : (
                <></>
            )}
        </div>
    )
}

export default Text