import React from "react" import Image, {Iimage} from "./Image" import { Link } from "@onegeo/gatsby-theme-onegeo" export interface ICard extends Iimage { title?: string content?: string to?: string anime?: boolean layout?: "top" | "left" } const oSize = { top: { main: "max-w-xs ", content: "h-24", image: "h-56", }, left: { main: "h-52 w-full ", content: "", image: "min-w-[320px] max-w-[320px]", }, } const Card = (props: ICard) => { const { to = "#", className = "", anime = true, layout = "top", title, content, image, } = props const transition = anime ? "lg:transition duration-200 ease-in-out lg:hover:-translate-y-2 lg:hover:shadow-2xl " : "" const cardside = layout == "left" ? "card-side " : "" const size = oSize[layout] return ( <Link to={to} className={ "card card-compact shadow-xl bg-base-100 text-neutral " + size.main + transition + cardside + className } > <div className={size.image}> <Image image={image} className="h-full w-full object-cover"/> </div> {title ? ( <div className="card-body"> <h2 className="card-title uppercase">{title}</h2> {content ? ( <p className={`${size.content} text-ellipsis overflow-hidden text-justify`} dangerouslySetInnerHTML={{ __html: content }} ></p> ) : null} </div> ) : null} </Link> ) } export default Card