kot.pink
1{{ define "repo/fragments/reaction" }}
2 <button
3 id="reactIndi-{{ .Kind }}"
4 class="flex justify-center items-center min-w-8 min-h-8 rounded border
5 leading-4 px-3 gap-1 relative group
6 {{ if eq .Count 0 }}
7 hidden
8 {{ end }}
9 {{ if .IsReacted }}
10 bg-sky-100
11 border-sky-400
12 dark:bg-sky-900
13 dark:border-sky-500
14 {{ else }}
15 border-gray-200
16 hover:bg-gray-50
17 hover:border-gray-300
18 dark:border-gray-700
19 dark:hover:bg-gray-700
20 dark:hover:border-gray-600
21 {{ end }}
22 "
23 {{ if gt (length .Users) 0 }}
24 title="{{ range $i, $did := .Users }}{{ if ne $i 0 }}, {{ end }}{{ resolve $did }}{{ end }}{{ if gt .Count (length .Users) }}, and {{ sub .Count (length .Users) }} more{{ end }}"
25 {{ else }}
26 title="{{ .Kind }}"
27 {{ end }}
28 {{ if .IsReacted }}
29 hx-delete="/react?subject={{ .ThreadAt }}&kind={{ .Kind }}"
30 {{ else }}
31 hx-post="/react?subject={{ .ThreadAt }}&kind={{ .Kind }}"
32 {{ end }}
33 hx-swap="outerHTML"
34 hx-trigger="click from:(#reactBtn-{{ .Kind }}, #reactIndi-{{ .Kind }})"
35 hx-disabled-elt="this"
36 >
37 <span>{{ .Kind }}</span> <span>{{ .Count }}</span>
38 </button>
39{{ end }}