martials.no/src/components/projects/MyProjectsPage.astro

---
import ProjectCard from "./ProjectCard.astro"
import * as m from "@/paraglide/messages"
import { type CollectionEntry } from "astro:content"
import { type NavLink } from "@/utils/linking"

interface Props {
  projects: CollectionEntry<"projects">[]
}

const { projects } = Astro.props

const baseUrl: NavLink = "/projects"
---

<h1 class="text-4xl font-bold text-center sm:my-10 mt-2">{m.myProjects()}</h1>
<div class="flex flex-wrap justify-around">
  {
    projects.map(
      ({
         data: { title, description, tags, heroImage, heroImageAlt },
         id
       }) => (
        <div class="my-5 px-2">
          <ProjectCard
            title={title}
            linkTo={`${baseUrl}/${id}`}
            description={description}
            tags={tags}
            image={heroImage}
            imageAlt={heroImageAlt}
          />
        </div>
      )
    )
  }
</div>