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