feat: add anime_recommendations component template

templates/components/anime_recommendations.gohtml

@@ -0,0 +1,57 @@
+{{define "anime_recommendations"}}
+{{if .Items}}
+<div class="w-full">
+  <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
+  <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+    {{range (slice .Items 0 (min (len .Items) 8))}}
+      <a href="/anime/{{.Entry.MalID}}" class="group flex flex-col gap-2">
+        <div class="aspect-2/3 overflow-hidden bg-background-surface shadow-md">
+          <img src="{{.Entry.Images.Webp.LargeImageURL}}" alt="{{.Entry.Title}}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
+        </div>
+        <span class="truncate text-xs font-medium text-foreground-muted transition-colors group-hover:text-foreground">{{.Entry.Title}}</span>
+      </a>
+    {{end}}
+  </div>
+</div>
+{{end}}
+{{end}}
+
+{{define "anime_recommendations_loading"}}
+<div
+  hx-get="/anime/{{.AnimeID}}?section=recommendations"
+  hx-trigger="load delay:1500ms"
+  hx-swap="outerHTML"
+>
+  <div class="w-full">
+    <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+      {{range (seq 8)}}
+        <div class="flex flex-col gap-2">
+          <div class="skeleton aspect-2/3"></div>
+          <div class="skeleton h-3 w-full"></div>
+        </div>
+      {{end}}
+    </div>
+  </div>
+</div>
+{{end}}
+
+{{define "anime_recommendations_initial_loading"}}
+<div
+  hx-get="/anime/{{.AnimeID}}?section=recommendations"
+  hx-trigger="load"
+  hx-swap="outerHTML"
+>
+  <div class="w-full">
+    <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+      {{range (seq 8)}}
+        <div class="flex flex-col gap-2">
+          <div class="skeleton aspect-2/3"></div>
+          <div class="skeleton h-3 w-full"></div>
+        </div>
+      {{end}}
+    </div>
+  </div>
+</div>
+{{end}}