tracks lexicons and how many times they appeared on the jetstream
ptr.pet
1<script lang="ts">
2 interface Props {
3 status: "connecting" | "connected" | "disconnected" | "error";
4 }
5
6 let { status }: Props = $props();
7
8 const statusConfig = {
9 connected: {
10 text: "stream live",
11 classes:
12 "bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 border-green-200 dark:border-green-800",
13 },
14 connecting: {
15 text: "stream connecting",
16 classes:
17 "bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 border-yellow-200 dark:border-yellow-800",
18 },
19 error: {
20 text: "stream errored",
21 classes:
22 "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 border-red-200 dark:border-red-800",
23 },
24 disconnected: {
25 text: "stream offline",
26 classes:
27 "bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 border-gray-200 dark:border-gray-800",
28 },
29 };
30
31 const config = $derived(statusConfig[status]);
32</script>
33
34<div class="flex flex-row items-center gap-2 wsbadge {config.classes}">
35 <!-- connecting spinner -->
36 {#if status === "connecting"}
37 <div
38 class="animate-spin rounded-full h-4 w-4 border-b-2 border-yellow-800 dark:border-yellow-200"
39 ></div>
40 {/if}
41 <!-- status text -->
42 <span>{config.text}</span>
43</div>