Card.tsx

import React from "react"
import Image, { Iimage } from "./Image"
import { Link } from "@onegeo-suite/gatsby-theme-onegeo"
import { twMerge } from "tailwind-merge"

export interface ICard extends Iimage {
    children?: React.ReactNode
    name?: string
    description?: string
    url?: string
    anime?: boolean
    layout?: "top" | "left" | "full"
    size?: "xs" | "base" | "xl" | "full"
    options?: object
}

const layoutClass = {
    full_base: {
        main: "image-full ",
        title: "",
        description: "",
        image: "h-52",
    },
    top_base: {
        main: "",
        title: "",
        description: "h-24",
        image: "h-52",
    },
    top_xs: {
        main: "",
        title: "",
        description: "h-12",
        image: "h-28",
    },
    top_xl: {
        main: "",
        title: "",
        description: "h-32",
        image: "h-72",
    },
    top_full: {
        main: "rounded-none h-full w-full",
        title: "",
        description: "h-32",
        image: "h-72",
    },
    left_bcase: {
        main: "card-side h-52 w-full ",
        title: "",
        description: "",
        image: "min-w-[320px] max-w-[320px]",
    },
    left_xs: {
        main: "card-side h-28 w-full ",
        title: "",
        description: "line-clamp-2",
        image: "min-w-[80px] max-w-[100px]",
    },
    left_xl: {
        main: "card-side h-72 w-full lg:hover:scale-105 lg:hover:-translate-y-0",
        title: "",
        description: "line-clamp-2",
        image: "min-w-[450px] max-w-[450px]",
    },
}

const CardContent = (props: ICard) => {
    const {
        children,
        layout = "top",
        name,
        description,
        image,
        size = "base",
    } = props

    const options = props.options ?? {}
    const lClass = layoutClass[layout + "_" + size] || layoutClass["top_base"]

    // Options from Directus (config user)
    /*
    options : {

        class: {
            main:
            image
            imageComponent
            body
            title
            description
        }
    }
    */
    const oClass = options.class || {}
    const inlineSVG = options.inlineSVG
    return (
        <>
            {image ? (
                // <figure>
                //     <svg class='' ... />
                // </figure>
                // OR
                // <figure>
                //     <img src={image.publicURL} />
                // </figure>
                <figure>
                    {options.inlineSVG ? (
                        <div
                            className={twMerge(lClass.image, oClass.image)}
                            dangerouslySetInnerHTML={{
                                __html: options.inlineSVG,
                            }}
                        />
                    ) : (
                        <div className={twMerge(lClass.image, oClass.image)}>
                            <Image
                                image={image}
                                className={twMerge(
                                    "h-full w-full object-cover",
                                    oClass.imageComponent
                                )}
                            />
                        </div>
                    )}
                </figure>
            ) : null}
            <div className={twMerge("card-body", oClass.body)}>
                {name ? (
                    <h2
                        className={twMerge(
                            "card-title uppercase",
                            lClass.title,
                            oClass.title
                        )}
                    >
                        {name}
                    </h2>
                ) : null}
                {description ? (
                    <div
                        className={twMerge(
                            "overflow-hidden text-ellipsis text-justify ",
                            lClass.description,
                            oClass.description
                        )}
                        dangerouslySetInnerHTML={{ __html: description }}
                    />
                ) : null}
                {children}
            </div>
        </>
    )
}

const Card = (props: ICard) => {
    const {
        className = "",
        anime = true,
        layout = "top",
        size = "base",
        url,
        options = {},
    } = props

    const transition = anime
        ? "lg:transition duration-200 ease-in-out lg:hover:-translate-y-2 lg:hover:shadow-xl "
        : ""

    const lClass = layoutClass[layout + "_" + size] || layoutClass["top_base"]

    const oClass = options.class || {}

    return url ? (
        <Link
            to={url}
            className={twMerge(
                "card card-compact  bg-base-100 text-base-content shadow-lg",
                transition,
                lClass.main,
                className,
                oClass.main
            )}
        >
            <CardContent {...props} />
        </Link>
    ) : (
        <div
            className={twMerge(
                "card card-compact bg-base-100 text-base-content shadow-lg",
                transition,
                lClass.main,
                className,
                oClass.main
            )}
        >
            <CardContent {...props} />
        </div>
    )
}

export default Card