blog/src/layouts/ProjectLayout.astro

---
import Layout from "./Layout.astro";
import { Image } from "astro:assets";
import TagBadge from "../components/TagBadge.astro";
import { ChevronLeft, ExternalLink } from "@lucide/astro";

interface Props {
  title: string;
  description: string;
  image: any;
  tags: string[];
  demoLink?: string;
  url?: string;
  sourceLink?: string;
}

const { title, description, image, tags, demoLink, url, sourceLink } =
  Astro.props;
---

<Layout title={`${title} - Another Hadi`} description={description}>
  <article class="max-w-4xl mx-auto px-4 py-20">
    <!-- Back button -->
    <div class="mb-8 flex flex-wrap justify-between gap-5">
      <a href="/projects" class="btn btn-ghost btn-sm">
        <ChevronLeft size={18} />
        Back to Projects
      </a>
    </div>

    <!-- Featured Image -->
    <!-- TODO: Future Enhancement - Support multiple images/project gallery -->
    {
      image && (
        <figure class="mb-8 rounded-2xl overflow-hidden">
          <Image
            src={image}
            alt={title}
            class="w-full aspect-video object-cover"
            width={1200}
            height={630}
          />
        </figure>
      )
    }

    <!-- Project Header -->
    <header class="mb-8">
      <h1 class="text-5xl font-bold mb-4">{title}</h1>
      <p class="text-xl text-base-content/70 mb-6">{description}</p>

      <!-- Prominent Action Buttons -->
      {
        (demoLink || sourceLink) && (
          <div class="flex flex-wrap gap-3 mb-6">
            {demoLink && (
              <a
                href={demoLink}
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-primary gap-2"
              >
                <ExternalLink class="size-5" />
                Live Demo
              </a>
            )}
            {url && (
              <a
                href={url}
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-soft gap-2"
              >
                <ExternalLink class="size-4" />
                Website
              </a>
            )}
            {sourceLink && (
              <a
                href={sourceLink}
                target="_blank"
                rel="noopener noreferrer"
                class="btn btn-soft gap-2"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 32 32"
                  fill="currentColor"
                >
                  <path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z" />
                </svg>
                View Source
              </a>
            )}
          </div>
        )
      }
    </header>

    <!-- Tags -->
    {
      tags && tags.length > 0 && (
        <div class="flex flex-wrap gap-2 mt-4">
          {tags.map((tag) => (
            <TagBadge tag={tag} />
          ))}
        </div>
      )
    }

    <!-- Divider -->
    <div class="divider"></div>

    <!-- Project Content -->
    <div class="prose-content max-w-none">
      <slot />
    </div>

    <!-- Divider -->
    <div class="divider mt-12"></div>

    <!-- Back to projects link -->
    <div class="flex justify-center gap-2 mt-12">
      <div class="flex gap-3 justify-center flex-wrap text-sm">
        <a href="/projects" class="link link-hover"
          >View All Projects</a
        >
        <span class="text-base-content/30">•</span>
        <a href="/#contact" class="link link-hover">Contact me</a>
        <span class="text-base-content/30">•</span>
        <a href="https://ko-fi.com/anotherhadi" class="link link-hover"
          >Support me</a
        >
      </div>
    </div>
  </article>
</Layout>

<style is:global>
  .prose-content {
    color: inherit;
    line-height: 1.75;
  }

  .prose-content h1,
  .prose-content h2,
  .prose-content h3,
  .prose-content h4,
  .prose-content h5,
  .prose-content h6 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .prose-content h1 {
    font-size: 2.25rem;
  }

  .prose-content h2 {
    font-size: 1.875rem;
  }

  .prose-content h3 {
    font-size: 1.5rem;
  }

  .prose-content p {
    margin-bottom: 1rem;
  }

  .prose-content a {
    text-decoration: underline;
  }

  .prose-content ul,
  .prose-content ol {
    margin-bottom: 1rem;
    margin-left: 1.5rem;
    list-style-position: outside;
  }

  .prose-content ul {
    list-style-type: disc;
  }

  .prose-content ol {
    list-style-type: decimal;
  }

  .prose-content li {
    margin-bottom: 0.5rem;
  }

  .prose-content code {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-family: ui-monospace, monospace;
  }

  .prose-content pre {
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
  }

  .prose-content pre code {
    background: transparent;
    padding: 0;
  }

  .prose-content blockquote {
    border-left-width: 4px;
    padding-left: 1rem;
    font-style: italic;
    margin: 1rem 0;
  }

  .prose-content img {
    border-radius: 0.5rem;
    margin: 1.5rem 0;
  }

  .prose-content strong {
    font-weight: 600;
  }
</style>