project cards with images

---
import ButtonGroup from "./ButtonGroup.astro";
interface Props {
  projectTitle: string;
  body: string;
  href: string;
  type?: string;
  repo?: string;
  external?: boolean;
  image?: string;
}

const { href, projectTitle, body, type, repo, image } = Astro.props;
---

<div
  class="bg-gray-50 dark:bg-gray-900 border border-gray-200 shadow-lg dark:border-gray-700 rounded-lg"
>
  <img
    src={image}
    alt={projectTitle}
    class="w-full h-64 object-cover object-center rounded-t-lg"
  />
  {
    type && (
      <span class="bg-primary text-white text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-md dark:bg-gray-700 dark:text-blue-100 mb-2">
        {type}
      </span>
    )
  }
  <h2 class="text-gray-900 dark:text-white text-3xl font-extrabold mb-2">
    {projectTitle}
  </h2>
  <p class="text-lg font-normal text-gray-700 dark:text-gray-400 mb-4">
    {body}
  </p>
  <ButtonGroup text1="More Info" href1={href} text2="Code Repo" href2={repo} />
</div>