Key figures, minor fixes

src/components/ProjectCard.astro

@@ -1,5 +1,5 @@
 ---
-import { getAllProjectImages } from '@lib/utils';
+import { getAllProjectImages } from "@lib/utils";
 
 import Paragraph from "@components/Paragraph.astro";
 import TextLink from "@components/TextLink.astro";
@@ -8,7 +8,7 @@ import { Icon } from "astro-icon/components";
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
 
-import { slugify } from '@lib/utils';
+import { slugify } from "@lib/utils";
 
 interface Props {
   project: CollectionEntry<"projects">;
@@ -121,6 +121,7 @@ const rotateOptions = [
 ];
 
 const projectHasBody = project.body && project.body.trim().length > 0;
+const link = `/projects/${slugify(project.data.type)}/${slugify(project.data.slug)}/`;
 ---
 
 <div class="grid grid-cols-1 text-left md:grid-cols-2">
@@ -132,20 +133,58 @@ const projectHasBody = project.body && project.body.trim().length > 0;
   >
     <span
       ><h2 class="font-header-alt inline-block text-lg font-semibold">
-        {projectHasBody && <TextLink href=`/projects/${slugify(project.data.type)}/${slugify(project.data.slug)}/`>{project.data.title}</TextLink>}{!projectHasBody && project.data.title }{!project.data.ongoing && <span class="italic text-sm font-light"> ({project.data.date.getFullYear()})</span>}</h2></span
+        {
+          projectHasBody && (
+            <TextLink href={link}>{project.data.title}</TextLink>
+          )
+        }{!projectHasBody && project.data.title}{
+          !project.data.ongoing && (
+            <span class="text-sm font-light italic">
+              {" "}
+              ({project.data.date.getFullYear()})
+            </span>
+          )
+        }
+      </h2></span
     >
     <h3 class="font-header-alt font-base font-medium">
       {project.data.role}
     </h3>
-    <div class="pt-2">
+    <div class="mt-2">
       <Token>{project.data.type}</Token>
     </div>
-    <Paragraph>{project.data.description}</Paragraph>
+    {
+      project.data.keyFigure && project.data.keyFigure.length > 0 && (
+        <div class="mt-2 text-sm">
+          {project.data.keyFigure.map((figure) => {
+            return (
+              <div>
+                <span class="font-bold">{figure.title}:</span>
+                <span>
+                  {figure.href && (
+                    <TextLink href={figure.href}>{figure.name}</TextLink>
+                  )}
+                  {!figure.href && figure.name}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )
+    }
+    <Paragraph
+      class:list={["px-0", "my-2", textOn === "right" ? "" : "md:pr-10"]}
+      >{project.data.description}</Paragraph
+    >
     {
       project.data.externalLinks !== undefined && (
         <span class="relative order-3 ml-auto flex w-full items-start justify-start space-x-2 text-xl">
-          {project.data.externalLinks.map((link, index) => (
-            <TextLink href={link.href} includeExternalLinkIcon={false} aria-label={link.name}>
+          {project.data.externalLinks.map((link) => (
+            <TextLink
+              href={link.href}
+              includeExternalLinkIcon={false}
+              aria-label={link.name}
+            >
               <Icon name={link.icon} />
             </TextLink>
           ))}