Card.tsx

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

export interface ICard extends Iimage {
    name?: string
    description?: string
    url?: string
    anime?: boolean
    layout?: "top" | "left"
    size?: "xs" | "base" | "xl"
}

const oClass = {
    top_base: {
        main: "max-w-xs ",
        description: "h-24",
        image: "h-56",
    },
    left_base: {
        main: "card-side h-52 w-full ",
        description: "",
        image: "min-w-[320px] max-w-[320px]",
    },
    left_xs: {
        main: "card-side h-28 w-full ",
        description: "line-clamp-2",
        image: "min-w-[80px] max-w-[100px]",
    },
}

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

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

    const oclass = oClass[layout + "_" + size] || oClass["top_base"]

    return (
        <Link
            to={url}
            className={
                "card card-compact shadow-xl bg-base-100 text-neutral " +
                oclass.main +
                transition +
                className
            }
        >
            <div className={oclass.image}>
                <Image image={image} className="h-full w-full object-cover" />
            </div>
            {name ? (
                <div className="card-body">
                    <h2 className="card-title uppercase">{name}</h2>
                    {description ? (
                        <div
                            className={
                                "text-justify text-ellipsis overflow-hidden " +
                                oclass.description
                            }
                            dangerouslySetInnerHTML={{ __html: description }}
                        />
                    ) : null}
                </div>
            ) : null}
        </Link>
    )
}

export default Card