From 07b9c144a97fd11a1c0bcfac4647329e9ba32117 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 20 Apr 2026 16:02:56 +0200
Subject: [PATCH] feat(components): extract anime relations list component

---
 web/components/anime/relations.templ | 38 ++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 web/components/anime/relations.templ

diff --git a/web/components/anime/relations.templ b/web/components/anime/relations.templ
new file mode 100644
index 0000000..f748b86
--- /dev/null
+++ b/web/components/anime/relations.templ
@@ -0,0 +1,38 @@
+package anime
+
+import (
+	"fmt"
+	"mal/integrations/jikan"
+	"mal/web/components"
+)
+
+templ RelationsList(relations []jikan.RelationEntry) {
+	if len(relations) > 1 {
+		<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="relations-grid">
+			for _, rel := range relations {
+				@components.AnimeCard(components.AnimeCardProps{
+					ID:          rel.Anime.MalID,
+					Title:       rel.Anime.DisplayTitle(),
+					ImageURL:    rel.Anime.ImageURL(),
+					Class:       relationCardClass(rel),
+					ImgClass:    "relation-thumb",
+					TitleClass:  "relation-title",
+					CurrentNode: rel.IsCurrent,
+				}) {
+					if rel.IsCurrent {
+						<div class="mt-2 h-0.5 w-10 bg-white"></div>
+					}
+					if rel.Relation != "" && rel.Relation != "Current" {
+						<div class="mt-1 text-xs text-(--text-faint)">{ rel.Relation }</div>
+					}
+				}
+			}
+		</div>
+	} else {
+		<p class="text-sm text-(--text-muted)">No related anime found.</p>
+	}
+}
+
+func relationCardClass(rel jikan.RelationEntry) string {
+	return "relation-card min-w-0 flex flex-col bg-transparent text-inherit no-underline"
+}