Files
at-container-registry/pkg/appview/templates/components/star.html
2026-04-12 20:36:57 -05:00

34 lines
1.5 KiB
HTML

{{ define "star" }}
{{/*
Star component - displays star icon with count
Required: .IsStarred (bool), .StarCount (int)
Optional: .Interactive (bool), .Handle (string), .Repository (string)
Interactive mode: renders as button with HTMX toggle
Display mode: renders as span (default)
*/}}
{{ if .Interactive }}
<button class="btn btn-sm gap-2 btn-ghost group border border-transparent hover:border-primary{{ if .IsStarred }} border-star!{{ end }}"
id="star-btn"
hx-ext="json-enc"
{{ if .IsStarred }}
hx-delete="/api/stars"
{{ else }}
hx-post="/api/stars"
{{ end }}
hx-vals='{"handle": "{{ .Handle }}", "repo": "{{ .Repository }}"}'
hx-swap="outerHTML"
hx-on::before-request="this.disabled=true"
hx-on::after-request="if(event.detail.xhr.status===401) window.location='/auth/oauth/login'"
aria-label="{{ if .IsStarred }}Unstar{{ else }}Star{{ end }} {{ .Handle }}/{{ .Repository }}">
<svg class="icon size-4 text-star stroke-star transition-transform group-hover:scale-110{{ if .IsStarred }} fill-star!{{ end }}" id="star-icon" aria-hidden="true"><use href="/icons.svg#star"></use></svg>
<span id="star-count">{{ .StarCount }}</span>
</button>
{{ else }}
<span class="flex items-center gap-2 text-base-content/60">
<svg class="icon size-[1.1rem] text-star stroke-star{{ if .IsStarred }} fill-star!{{ end }}" aria-hidden="true"><use href="/icons.svg#star"></use></svg>
<span class="font-semibold text-base-content">{{ .StarCount }}</span>
</span>
{{ end }}
{{ end }}