Text.tsx

import React from "react"
import Button from "./core/Button"
import { twMerge } from "tailwind-merge"

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 || {}

    return (
        <div className={twMerge(oClass.main, className)}>
            {title && (
                <h2
                    className={twMerge(
                        "font-extrabold sm:text-4xl",
                        oClass.title
                    )}
                >
                    {title}
                </h2>
            )}
            {content && (
                <div
                    className={twMerge(
                        "pt-10 text-justify text-xl leading-8",
                        oClass.content
                    )}
                    dangerouslySetInnerHTML={{ __html: content }}
                ></div>
            )}
            {action && action.name !== "" ? (
                <Button
                    {...action}
                    className={twMerge(
                        "mt-10",
                        action.className,
                        oClass.action
                    )}
                    {...options.action}
                />
            ) : (
                <></>
            )}
        </div>
    )
}

export default Text