feat(components): extract anime relations list component
This commit is contained in:
38
web/components/anime/relations.templ
Normal file
38
web/components/anime/relations.templ
Normal file
@@ -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"
|
||||
}
|
||||
Reference in New Issue
Block a user