Projects.astro

---
import GitHub from "./icons/GitHub.astro";
import Link from "./icons/Link.astro";
import LinkButton from "./LinkButton.astro";
import contentData from '@/data/content.json';

// Import required icons
import NextJS from "./icons/NextJS.astro";
import Tailwind from "./icons/Tailwind.astro";
// Potentially import other icons if your JSON defines them

// Map icon strings from JSON to actual components
const ICONS = {
  NextJS: NextJS,
  Tailwind: Tailwind,
  // Add other icons here corresponding to content.json
};

const { tags: projectTagsData, items: projectItems } = contentData.projects;
---

<div class="flex flex-col gap-y-16">
  {
    projectItems.map((project: any) => (
    <article class="flex flex-col space-x-0 space-y-8 group md:flex-row md:space-x-8 md:space-y-0">
  <div class="w-full md:w-1/2">
    <div class="relative flex flex-col items-center col-span-6 row-span-5 gap-8 transition duration-500 ease-in-out transform shadow-xl overflow-clip rounded-xl sm:rounded-xl md:group-hover:-translate-y-1 md:group-hover:shadow-2xl lg:border lg:border-gray-800 lg:hover:border-gray-700 lg:hover:bg-gray-800/50">
      <img alt={project.title} class="object-cover object-top w-full h-56 transition duration-500 sm:h-full md:scale-110 md:group-hover:scale-105" loading="lazy" src={project.image} />
    </div>
  </div>

  <div class="w-full md:w-1/2 md:max-w-lg">
    <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
      {project.title}
    </h3>
    <div class="flex flex-wrap mt-2">
      <ul class="flex flex-row mb-2 gap-x-2">
          {project.tags.map((tagKey: keyof typeof projectTagsData) => {
            const tagDetails = projectTagsData[tagKey];
            const IconComponent = ICONS[tagDetails.icon as keyof typeof ICONS];
            return (
              <li>
                <span class={`flex gap-x-2 rounded-full text-xs ${tagDetails.class} py-1 px-2 `}>
                  {IconComponent && <IconComponent class="size-4" />}
                  {tagDetails.name}
                </span>
              </li>
            );
          })}
        </ul>

      <div class="mt-2 text-gray-700 dark:text-gray-400">{project.description}</div>
      <footer class="flex items-end justify-start mt-4 gap-x-4">
          {project.github && (
            <LinkButton href={project.github}>
              <GitHub class="size-6" />
              Code
              
            </LinkButton>
          )}
          {project.link && (
            <LinkButton href={project.link}>
              <Link class="size-4" />
              Preview
            </LinkButton>
          )}
        </footer>
    </div>
  </div>
</article>
    ))
  }
</div>