yoten.app
Yōten: A social tracker for your language learning journey built on the atproto.
brookjeynes.dev
1package partials
2
3import "yoten.app/internal/db"
4
5templ Notification(params NotificationProps) {
6 <div
7 id={ params.Notification.ID }
8 class={ "card", templ.KV("border border-primary", params.Notification.State==db.NotificationStateUnread) }
9 >
10 switch (params.Notification.Type) {
11 case db.NotificationTypeFollow:
12 <div>
13 <h1 class="font-semibold">New Follower</h1>
14 <p class="text-sm mt-1">
15 <a class="hover:underline" href={ templ.SafeURL("/" + params.Notification.ActorDid) }>
16 @{ params.Notification.ActorBskyHandle }
17 </a> started following you
18 </p>
19 </div>
20 case db.NotificationTypeReaction:
21 <div>
22 <h1 class="font-semibold">New Reaction</h1>
23 <p class="text-sm mt-1">
24 <a class="hover:underline" href={ templ.SafeURL("/" + params.Notification.ActorDid) }>
25 @{ params.Notification.ActorBskyHandle }
26 </a> reacted to your
27 <a class="hover:underline" href={ templ.SafeURL("/" + params.Notification.SubjectDid + "/session/" + params.Notification.SubjectRkey) }>
28 study session
29 </a>
30 </p>
31 </div>
32 case db.NotificationTypeComment:
33 <div>
34 <h1 class="font-semibold">New Comment</h1>
35 <p class="text-sm mt-1">
36 <a class="hover:underline" href={ templ.SafeURL("/" + params.Notification.ActorDid) }>
37 @{ params.Notification.ActorBskyHandle }
38 </a> commented on your
39 <a class="hover:underline" href={ templ.SafeURL("/" + params.Notification.SubjectDid + "/session/" + params.Notification.SubjectRkey) }>
40 study session
41 </a>
42 </p>
43 </div>
44 case db.NotificationTypeReply:
45 <div>
46 <h1 class="font-semibold">New Reply</h1>
47 <p class="text-sm mt-1">
48 <a class="hover:underline" href={ templ.SafeURL("/" + params.Notification.ActorDid) }>
49 @{ params.Notification.ActorBskyHandle }
50 </a> replied to your study session
51 // TODO: Link to comment.
52 // <a class="hover:underline" href={ templ.SafeURL("/" + params.Notification.SubjectDid + "/comment/" + params.Notification.SubjectRkey) }>
53 // comment
54 // </a>
55 </p>
56 </div>
57 default:
58 }
59 <p class="text-xs text-text-muted">{ params.Notification.CreatedAt.Format("02/01/2006") }</p>
60 </div>
61}