julien.rbrt.fr
forked from
tangled.org/core
Monorepo for Tangled — https://tangled.org
1{{ define "user/fragments/profileCard" }}
2 <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm max-h-fit">
3 <div class="grid grid-cols-3 md:grid-cols-1 gap-1 items-center">
4 <div id="avatar" class="col-span-1 flex justify-center items-center">
5 {{ if .AvatarUri }}
6 <div class="w-3/4 aspect-square relative">
7 <img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ .AvatarUri }}" />
8 </div>
9 {{ end }}
10 </div>
11 <div class="col-span-2">
12 <p title="{{ didOrHandle .UserDid .UserHandle }}"
13 class="text-lg font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
14 {{ didOrHandle .UserDid .UserHandle }}
15 </p>
16
17 <div class="md:hidden">
18 {{ block "followerFollowing" (list .Followers .Following) }} {{ end }}
19 </div>
20 </div>
21 <div class="col-span-3 md:col-span-full">
22 <div id="profile-bio" class="text-sm">
23 {{ $profile := .Profile }}
24 {{ with .Profile }}
25
26 {{ if .Description }}
27 <p class="text-base pb-4 md:pb-2">{{ .Description }}</p>
28 {{ end }}
29
30 <div class="hidden md:block">
31 {{ block "followerFollowing" (list $.Followers $.Following) }} {{ end }}
32 </div>
33
34 <div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
35 {{ if .Location }}
36 <div class="flex items-center gap-2">
37 <span class="flex-shrink-0">{{ i "map-pin" "size-4" }}</span>
38 <span>{{ .Location }}</span>
39 </div>
40 {{ end }}
41 {{ if .IncludeBluesky }}
42 <div class="flex items-center gap-2">
43 <span class="flex-shrink-0">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white" }}</span>
44 <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ didOrHandle $.UserDid $.UserHandle }}</a>
45 </div>
46 {{ end }}
47 {{ range $link := .Links }}
48 {{ if $link }}
49 <div class="flex items-center gap-2">
50 <span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
51 <a href="{{ $link }}">{{ $link }}</a>
52 </div>
53 {{ end }}
54 {{ end }}
55 {{ if not $profile.IsStatsEmpty }}
56 <div class="flex items-center justify-evenly gap-2 py-2">
57 {{ range $stat := .Stats }}
58 {{ if $stat.Kind }}
59 <div class="flex flex-col items-center gap-2">
60 <span class="text-xl font-bold">{{ $stat.Value }}</span>
61 <span>{{ $stat.Kind.String }}</span>
62 </div>
63 {{ end }}
64 {{ end }}
65 </div>
66 {{ end }}
67 </div>
68 {{ end }}
69 {{ if ne .FollowStatus.String "IsSelf" }}
70 {{ template "user/fragments/follow" . }}
71 {{ else }}
72 <button id="editBtn"
73 class="btn mt-2 w-full flex items-center gap-2 group"
74 hx-target="#profile-bio"
75 hx-get="/profile/edit-bio"
76 hx-swap="innerHTML">
77 {{ i "pencil" "w-4 h-4" }}
78 edit
79 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
80 </button>
81 {{ end }}
82 </div>
83 <div id="update-profile" class="text-red-400 dark:text-red-500"></div>
84 </div>
85 </div>
86 </div>
87{{ end }}
88
89{{ define "followerFollowing" }}
90 {{ $followers := index . 0 }}
91 {{ $following := index . 1 }}
92 <div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
93 <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
94 <span id="followers">{{ $followers }} followers</span>
95 <span class="select-none after:content-['·']"></span>
96 <span id="following">{{ $following }} following</span>
97 </div>
98{{ end }}
99