65 lines
1.9 KiB
Plaintext
65 lines
1.9 KiB
Plaintext
package ui
|
|
|
|
import "fmt"
|
|
|
|
type AnimeCardProps struct {
|
|
ID int
|
|
Title string
|
|
ImageURL string
|
|
Href string
|
|
// Options to customize the card behavior
|
|
Class string // override default wrapper class
|
|
ImgClass string // override default image class
|
|
TitleClass string // override default title class
|
|
HideTitle bool // if true, do not render the default title block
|
|
CurrentNode bool // if true, renders a div instead of an anchor tag (useful for graph nodes)
|
|
}
|
|
|
|
templ AnimeCard(props AnimeCardProps) {
|
|
if props.CurrentNode {
|
|
<div class={ defaultString(props.Class, "min-w-0") }>
|
|
@animeCardPoster(props.ImageURL, props.Title, props.ImgClass)
|
|
<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
|
|
{ props.Title }
|
|
</div>
|
|
{ children... }
|
|
</div>
|
|
} else {
|
|
<a href={ templ.URL(cardHref(props)) } class={ defaultString(props.Class, "flex flex-col bg-transparent text-inherit no-underline") }>
|
|
@animeCardPoster(props.ImageURL, props.Title, props.ImgClass)
|
|
|
|
if !props.HideTitle {
|
|
<div class={ defaultString(props.TitleClass, "mt-2 line-clamp-2 text-sm leading-snug text-(--text)") }>
|
|
{ props.Title }
|
|
</div>
|
|
}
|
|
{ children... }
|
|
</a>
|
|
}
|
|
}
|
|
|
|
func cardHref(props AnimeCardProps) string {
|
|
if props.Href != "" {
|
|
return props.Href
|
|
}
|
|
|
|
return fmt.Sprintf("/anime/%d", props.ID)
|
|
}
|
|
|
|
templ animeCardPoster(imageURL, title, imgClass string) {
|
|
<div class="flex w-full aspect-2/3 justify-center overflow-hidden">
|
|
if imageURL != "" {
|
|
<img src={ imageURL } alt={ title } class={ defaultString(imgClass, "block w-full object-cover object-center") } loading="lazy"/>
|
|
} else {
|
|
<div class="flex w-full justify-center overflow-hidden text-transparent">No image</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
func defaultString(val, fallback string) string {
|
|
if val == "" {
|
|
return fallback
|
|
}
|
|
return val
|
|
}
|