Monorepo for Tangled
tangled.org
1{{ define "timeline/fragments/notifications" }}
2 <div class="border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
3 <div class="flex items-center justify-between bg-white/50 dark:bg-gray-800/50">
4 <a href="/notifications" class="flex items-center gap-2 px-4 py-2 no-underline hover:no-underline flex-1">
5 <h3 class="text-base dark:text-white flex items-center gap-2">
6 {{ i "bell" "size-4 flex-shrink-0" }}
7 Notifications
8 </h3>
9 </a>
10 <a href="/notifications" class="text-sm font-normal flex items-center gap-1 pr-4 text-gray-500 dark:text-gray-400 no-underline hover:no-underline">
11 View all {{ i "arrow-right" "size-3.5" }}
12 </a>
13 </div>
14
15 {{ if not .LoggedInUser }}
16 <div class="px-4 py-8 text-sm text-center text-gray-400 dark:text-gray-500">
17 <div class="w-10 h-10 mx-auto mb-3 text-gray-300 dark:text-gray-600">
18 {{ i "bell-off" "w-10 h-10" }}
19 </div>
20 <a href="/login">Log in</a> to view your inbox
21 </div>
22 {{ else if not .Notifications }}
23 <div class="px-4 py-8 text-sm text-center text-gray-400 dark:text-gray-500">
24 <div class="w-10 h-10 mx-auto mb-3 text-gray-300 dark:text-gray-600">
25 {{ i "inbox" "w-10 h-10" }}
26 </div>
27 <p>All caught up!</p>
28 </div>
29 {{ else }}
30 <div class="divide-y divide-gray-200 dark:divide-gray-700">
31 {{ range .Notifications }}
32 {{ template "notifications/fragments/item" . }}
33 {{ end }}
34 </div>
35 {{ end }}
36 </div>
37{{ end }}