Card.tsx

import React from "react";
import { Link } from "gatsby";
import { IGatsbyImageData } from "gatsby-plugin-image";

import CardImage from "./card/CardImage";


interface Props {
  title?: string;
  content?: string;
  image?: string | IGatsbyImageData;
  to?: string;
  anime?: boolean;
  layout?: "top" | "left";
  className?: string;
}

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: Props) => {
  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}>
        <CardImage 
          image={image}
        />
      </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;