Text.tsx

import React from "react"
import { twMerge } from "tailwind-merge"
import { InformationCircleIcon } from "@heroicons/react/outline"
import Tooltip from "./core/Tooltip"

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

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

    return (
        <div className={twMerge(oClass.main, className)}>
            {title && (
                <h2
                    className={twMerge(
                        "text-2xl font-extrabold sm:text-4xl",
                        oClass.title
                    )}
                >
                    {title}
                    {oTooltip.title ? (
                        <Tooltip text={oTooltip.title}>
                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
                        </Tooltip>
                    ) : (
                        <></>
                    )}
                </h2>
            )}
            {subtitle && (
                <h4
                    className={twMerge(
                        "mt-2 text-2xl font-bold",
                        oClass.subtitle
                    )}
                >
                    {subtitle}{" "}
                    {oTooltip.subtitle ? (
                        <Tooltip text={oTooltip.subtitle}>
                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
                        </Tooltip>
                    ) : (
                        <></>
                    )}
                </h4>
            )}
            {content && (
                <>
                    <span
                        className={twMerge(
                            //"pt-10 text-justify text-xl leading-8 sm:text-2xl",
                            "pt-10 text-justify text-xl leading-8 ",
                            oClass.content
                        )}
                        dangerouslySetInnerHTML={{ __html: content }}
                    />
                    {oTooltip.content ? (
                        <Tooltip text={oTooltip.content}>
                            <InformationCircleIcon className="text-secondary h-5 w-5 cursor-pointer" />
                        </Tooltip>
                    ) : (
                        <></>
                    )}
                </>
            )}
            {action && action.name !== "" ? (
                <Button
                    {...action}
                    className={twMerge(
                        "mt-10",
                        action.className,
                        oClass.action
                    )}
                    {...options.action}
                />
            ) : (
                <></>
            )}
        </div>
    )
}

export default Text