···

       
1
       
1
       
+
       
{{ define "fragments/tinyAvatarList" }}

     

       
2
       
2
       
+
       
  {{ $all := .all }}

     

       
3
       
3
       
+
       
  {{ $classes := .classes }}

     

       
4
       
4
       
+
       
  {{ $ps := take $all 5 }}

     

       
5
       
5
       
+
       
  <div class="inline-flex items-center -space-x-3">

     

       
6
       
6
       
+
       
    {{ $c := "z-50 z-40 z-30 z-20 z-10" }}

     

       
7
       
7
       
+
       
    {{ range $i, $p := $ps }}

     

       
8
       
8
       
+
       
      <img

     

       
9
       
9
       
+
       
          src="{{ tinyAvatar . }}"

     

       
10
       
10
       
+
       
          alt=""

     

       
11
       
11
       
+
       
          class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-{{sub 5 $i}}0 {{ $classes }}"

     

       
12
       
12
       
+
       
      />

     

       
13
       
13
       
+
       
    {{ end }}

     

       
14
       
14
       
+
       


     

       
15
       
15
       
+
       
    {{ if gt (len $all) 5 }}

     

       
16
       
16
       
+
       
      <span class="pl-4 text-gray-500 dark:text-gray-400 text-sm">

     

       
17
       
17
       
+
       
        +{{ sub (len $all) 5 }}

     

       
18
       
18
       
+
       
      </span>

     

       
19
       
19
       
+
       
    {{ end }}

     

       
20
       
20
       
+
       
  </div>

     

       
21
       
21
       
+
       
{{ end }}

     

       
22
       
22
       
+
       


     

···

       
6
       
6
       
 
       
      <span class="font-bold text-gray-500 dark:text-gray-400 capitalize">Participants</span>

     

       
7
       
7
       
 
       
      <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 ml-1">{{ len $all }}</span>

     

       
8
       
8
       
 
       
    </div>

     

       
9
       
9
       
-
       
    <div class="flex items-center -space-x-3 mt-2">

     

       
10
       
10
       
-
       
      {{ $c := "z-50 z-40 z-30 z-20 z-10" }}

     

       
11
       
11
       
-
       
      {{ range $i, $p := $ps }}

     

       
12
       
12
       
-
       
        <img

     

       
13
       
13
       
-
       
            src="{{ tinyAvatar . }}"

     

       
14
       
14
       
-
       
            alt=""

     

       
15
       
15
       
-
       
            class="rounded-full h-8 w-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-{{sub 5 $i}}0"

     

       
16
       
16
       
-
       
        />

     

       
17
       
17
       
-
       
      {{ end }}

     

       
18
       
18
       
-
       


     

       
19
       
19
       
-
       
      {{ if gt (len $all) 5 }}

     

       
20
       
20
       
-
       
        <span class="pl-4 text-gray-500 dark:text-gray-400 text-sm">

     

       
21
       
21
       
-
       
          +{{ sub (len $all) 5 }}

     

       
22
       
22
       
-
       
        </span>

     

       
23
       
23
       
-
       
      {{ end }}

     

       
24
       
24
       
-
       
    </div>

     

       
9
       
9
       
+
       
    {{ template "fragments/tinyAvatarList" (dict "all" $all "classes" "w-8 h-8") }}

     

       
25
       
10
       
 
       
  </div>

     

       
26
       
11
       
 
       
{{ end }}