astro-personal-website/src/layouts/ProjectLayout.astro

---
import ContainerLayout from "./ContainerLayout.astro";
import BaseLayout from "./BaseLayout.astro";
import TextContentLayout from "./TextContentLayout.astro";
import type { MarkdownLayoutProps } from "astro";

type Props = MarkdownLayoutProps<{
  title: string;
  description: string;
  image: string;
  technologies: string;
  website: string;
  repository?: string;
  date: string;
}>;

const { title, website, repository, technologies, date } =
  Astro.props.frontmatter;
---

<BaseLayout {title}>
  <ContainerLayout>
    <TextContentLayout>
      <h1
        class="mb-4 text-center font-serif text-4xl font-light tracking-wide text-gray-600 underline decoration-yellow-400 decoration-2 underline-offset-8"
      >
        {title}
      </h1>

      <p class="mx-auto mb-4 text-center text-sm text-gray-500">
        {
          new Date(date).toLocaleDateString("en-US", {
            month: "long",
            year: "numeric",
          })
        }
      </p>

      <div class="mb-8 flex flex-wrap justify-center">
        {
          technologies
            .split(",")
            .map((technology) => (
              <span class="m-1 rounded-full bg-gray-200 px-3 py-0.5 text-sm font-semibold text-gray-600">
                {technology}
              </span>
            ))
        }
      </div>

      <div class="mb-6 flex flex-col items-center justify-center sm:flex-row">
        {
          website && (
            <a
              href={website}
              target="_blank"
              class="mx-2 mb-2 block rounded-lg border border-gray-200 bg-white px-4 py-3 font-semibold tracking-wide text-gray-600 shadow duration-100 hover:bg-gray-50"
            >
              🖥️ Visit website
            </a>
          )
        }

        {
          repository && (
            <a
              href={repository}
              target="_blank"
              class="mx-2 mb-2 block rounded-lg border border-gray-200 bg-white px-4 py-3 font-semibold tracking-wide text-gray-600 shadow duration-100 hover:bg-gray-50"
            >
              📦 Code on GitHub
            </a>
          )
        }
      </div>
      <div
        class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h2:font-light prose-a:text-teal-600 prose-a:no-underline prose-a:duration-100 hover:prose-a:text-teal-500 hover:prose-a:underline before:prose-code:content-[''] after:prose-code:content-['']"
      >
        <slot />
      </div>
    </TextContentLayout>
  </ContainerLayout>
</BaseLayout>