import React from "react" import Image, { Iimage } from "./Image" import { Link } from "@onegeo-suite/gatsby-theme-onegeo" import cx from "classix" export interface ICard extends Iimage { children?: React.ReactNode name?: string description?: string url?: string anime?: boolean layout?: "top" | "left" | "full" size?: "xs" | "base" | "xl" 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", }, left_base: { 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:translate-x-2 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", options = {}, } = props const lClass = layoutClass[layout + "_" + size] || layoutClass["top_base"] console.log("image", image) // Options from Directus (config user) const oClass = options.class || {} return ( <> {image ? ( // <figure> // <img // src={image.publicURL} // /> // </figure> <figure><div className={cx(lClass.image, oClass.image)}> <Image image={image} className={cx( "h-full w-full object-cover", oClass.imageComponent )} /> </div> </figure> ) : null} <div className={cx("card-body", oClass.body)}> {name ? ( <h2 className={cx( "card-title uppercase", lClass.title, oClass.title )} > {name} </h2> ) : null} {description ? ( <div className={cx( "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={cx( "card card-compact bg-base-100 text-base-content shadow-lg", lClass.main, transition, className, oClass.main )} > <CardContent {...props} /> </Link> ) : ( <div className={cx( "card card-compact bg-base-100 text-base-content shadow-lg", lClass.main, transition, className, oClass.main )} > <CardContent {...props} /> </div> ) } export default Card