alice.pds.demo.boltless.dev
This repository has no description
1{{ define "fragments/starBtn" }}
2 {{/* NOTE: this fragment is always replaced with hx-swap-oob */}}
3 <div
4 id="starBtn"
5 class="flex w-full min-h-[30px] items-stretch overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
6 data-star-subject-at="{{ .SubjectAt }}"
7 {{ if .HxSwapOob }}hx-swap-oob='outerHTML:#starBtn[data-star-subject-at="{{ .SubjectAt }}"]'{{ end }}
8 >
9 <button
10 class="flex flex-1 justify-center gap-2 items-center px-2 group disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
11 {{ if .IsStarred }}
12 hx-delete="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}"
13 {{ else }}
14 hx-post="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}"
15 {{ end }}
16 hx-trigger="click"
17 hx-disabled-elt="this"
18 >
19 {{ if .IsStarred }}
20 {{ i "star" "w-4 h-4 fill-current inline group-[.htmx-request]:hidden" }}
21 {{ else }}
22 {{ i "star" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
23 {{ end }}
24 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
25 <span class="text-sm md:hidden group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span>
26 </button>
27 {{ if .RepoName }}
28 {{ $did := .SubjectAt.Authority | string }}
29 <a
30 href="/{{ resolve $did }}/{{ .RepoName }}/stars"
31 class="flex items-center px-2 text-sm no-underline hover:no-underline border-l border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
32 title="Starred by"
33 >
34 {{ .StarCount }}
35 </a>
36 {{ else }}
37 <span class="flex items-center px-2 text-sm border-l border-gray-200 dark:border-gray-700">
38 {{ .StarCount }}
39 </span>
40 {{ end }}
41 </div>
42{{ end }}