From 42f2ac627e5d2589d35bcd1a132e3ce9d32086fb Mon Sep 17 00:00:00 2001
From: Maddy Guthridge <hello@maddyguthridge.com>
Date: Fri, 30 Aug 2024 21:01:28 +1000
Subject: [PATCH] Display card links for items

---
 src/routes/[group]/[item]/+page.svelte | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/routes/[group]/[item]/+page.svelte b/src/routes/[group]/[item]/+page.svelte
index ca8fb88f..cc30844b 100644
--- a/src/routes/[group]/[item]/+page.svelte
+++ b/src/routes/[group]/[item]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Navbar } from '$components';
-  import { IconCard, RepoCard, PackageCard, CardList } from '$components/card';
+  import { IconCard, RepoCard, PackageCard, CardList, ItemCardGrid } from '$components/card';
   import { ItemChipList } from '$components/chip';
   import Background from '$components/Background.svelte';
   import Paper from '$components/Paper.svelte';
@@ -102,7 +102,17 @@
     <AsciinemaPlayer castUrl="/projects/{label.slug}/demo.asciinema" />
   {/if} -->
 
-  <!-- TODO: Display linked items as cards -->
+  <!-- Display linked items as cards -->
+  <div id="card-links">
+    {#each itemData.info.links.filter(([l]) => l.style === 'card') as [linkOptions, linkedItems]}
+    <h2>{linkOptions.title}</h2>
+      <ItemCardGrid
+        globals={data.globals}
+        groupId={linkOptions.groupId}
+        itemIds={linkedItems}
+      />
+    {/each}
+  </div>
 </main>
 
 <style>
@@ -136,7 +146,7 @@
     width: 80%;
   }
 
-  /* #association-cards {
+  #card-links {
     width: 80%;
-  } */
+  }
 </style>