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