Card.tsx

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

interface Props {
  to?: string;
  className?: string;
  anime?: boolean;
  side?: boolean;
  icon?: string;
  title?: string;
  content?: string;
}

const Card = (props: Props) => {
  const {
    to = "#",
    className = "",
    anime = true,
    side = true,
    title,
    content,
    icon,
  } = props;

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

  const cardside = side ? "card-side " : "";

  return (
    <Link
      to={to}
      className={
        "card card-compact shadow-xl bg-base-100 text-neutral max-w-xs " +
        transition +
        cardside +
        className
      }
    >
      {icon ? (
        <figure className="pl-4 py-4">
          {/* TODO: Manage dynamic image from Db ... GatsbyImage */}
          <StaticImage
            src="../images/hero/datastore.png"
            alt={icon}
            className="p-4 w-12 h-12"
          />
        </figure>
      ) : null}
      {title ? (
        <div className="card-body ">
          <h2 className="card-title uppercase">{title}</h2>
          {content ? <p>{content}</p> : null}
        </div>
      ) : null}
    </Link>
  );
};

export default Card;