yoten.app
Yōten: A social tracker for your language learning journey built on the atproto.
brookjeynes.dev
1package views
2
3import (
4 "yoten.app/internal/server/views/layouts"
5 "yoten.app/internal/server/views/partials"
6)
7
8templ FriendsPage(params FriendsPageParams) {
9 @layouts.Base(layouts.BaseParams{Title: "friends"}) {
10 @partials.Header(partials.HeaderProps{User: params.User})
11 <div class="container mx-auto max-w-2xl px-4 py-8">
12 <div class="flex items-center justify-between mb-8">
13 <div>
14 <h1 class="text-3xl font-bold">Friends</h1>
15 <p class="mt-1">Connect with fellow language learners</p>
16 </div>
17 </div>
18 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
19 <div class="card text-center">
20 <p class="text-2xl font-bold">{ params.Followers }</p>
21 <div class="text-xs text-text-muted flex items-center justify-center gap-1 mt-1">
22 <i class="w-4 h-4" data-lucide="users"></i>
23 <p class="text-xs">Followers</p>
24 </div>
25 </div>
26 <div class="card text-center">
27 <p class="text-2xl font-bold">{ params.Following }</p>
28 <div class="text-xs text-text-muted flex items-center justify-center gap-1 mt-1">
29 <i class="w-4 h-4" data-lucide="user-plus"></i>
30 <p class="text-xs">Following</p>
31 </div>
32 </div>
33 </div>
34 <div x-data="{ mode: 'following' }" class="flex flex-col">
35 <div class="flex border border-bg-dark rounded-lg p-1 bg-bg-light">
36 <button
37 type="button"
38 hx-target="#friends-feed"
39 id="following-feed-button"
40 hx-swap="innerHTML"
41 hx-get="/friends/feed"
42 hx-disabled-elt="#followers-feed-button,#following-feed-button"
43 hx-indicator="#feed-spinner"
44 hx-include="#friends-mode"
45 @click="mode = 'following'"
46 :disabled="mode === 'following'"
47 :class="mode === 'following' ? 'bg-primary shadow-sm text-text' : 'text-text-muted'"
48 class="cursor-pointer w-1/2 py-2 px-4 rounded-md font-semibold transition-all"
49 >
50 Following
51 </button>
52 <button
53 type="button"
54 hx-target="#friends-feed"
55 id="followers-button"
56 hx-swap="innerHTML"
57 hx-get="/friends/feed"
58 hx-disabled-elt="#followers-feed-button,#following-feed-button"
59 hx-include="#friends-mode"
60 hx-indicator="#feed-spinner"
61 @click="mode = 'followers'"
62 :disabled="mode === 'followers'"
63 :class="mode === 'followers' ? 'bg-primary shadow-sm text-text' : 'text-text-muted'"
64 class="cursor-pointer w-1/2 py-2 px-4 rounded-md font-semibold transition-all"
65 >
66 Followers
67 </button>
68 </div>
69 <div id="feed-spinner" class="htmx-indicator flex justify-center py-4">
70 <i data-lucide="loader-circle" class="w-6 h-6 animate-spin text-text-muted"></i>
71 </div>
72 <div class="flex items-center justify-between">
73 <h2
74 class="text-lg font-semibold text-text mb-2"
75 x-text="mode === 'following' ? 'People you follow' : 'Your followers'"
76 ></h2>
77 </div>
78 <input type="hidden" id="friends-mode" name="mode" x-bind:value="mode"/>
79 </div>
80 <div
81 id="friends-feed"
82 class="flex flex-col gap-6"
83 hx-get="/friends/feed"
84 hx-trigger="load"
85 hx-target="this"
86 hx-include="#friends-mode"
87 hx-swap="innerHTML"
88 >
89 <div class="flex justify-center py-4">
90 <i data-lucide="loader-circle" class="w-6 h-6 animate-spin text-text-muted"></i>
91 </div>
92 </div>
93 </div>
94 }
95}