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: "bg-green-100 text-green-800 border-green-200",
12 },
13 connecting: {
14 text: "stream connecting",
15 classes: "bg-yellow-100 text-yellow-800 border-yellow-200",
16 },
17 error: {
18 text: "stream errored",
19 classes: "bg-red-100 text-red-800 border-red-200",
20 },
21 disconnected: {
22 text: "stream offline",
23 classes: "bg-gray-100 text-gray-800 border-gray-200",
24 },
25 };
26
27 const config = $derived(statusConfig[status]);
28</script>
29
30<span class="wsbadge {config.classes}">
31 {config.text}
32</span>
33
34<style lang="postcss">
35 @reference "../../app.css";
36 .wsbadge {
37 @apply text-sm font-semibold mt-1.5 px-2.5 py-0.5 rounded-full border;
38 }
39</style>