tracks lexicons and how many times they appeared on the jetstream
ptr.pet
1<script lang="ts">
2 interface Props {
3 refreshRate: string;
4 onRefreshChange: (value: string) => void;
5 }
6
7 let { refreshRate, onRefreshChange }: Props = $props();
8</script>
9
10<div
11 class="wsbadge !pl-2 !px-1 !mt-0 !font-normal bg-green-100 hover:bg-green-200 border-green-300"
12>
13 <label for="refresh-rate" class="text-green-800 mr-1">refresh:</label>
14 <input
15 id="refresh-rate"
16 value={refreshRate}
17 oninput={(e) => {
18 const el = e.target as HTMLInputElement;
19 if (!el.validity.valid) el.value = el.value.replace(/\D+/g, "");
20 onRefreshChange(el.value);
21 }}
22 type="text"
23 inputmode="numeric"
24 pattern="[0-9]*"
25 min="0"
26 placeholder="real-time"
27 class="bg-green-50 text-green-900 placeholder-green-400 border border-green-200 rounded-full px-1 outline-none focus:bg-white focus:border-green-400 min-w-0 w-20"
28 />
29 <span class="text-green-700">s</span>
30</div>
31
32<style lang="postcss">
33 @reference "../../app.css";
34 .wsbadge {
35 @apply text-sm font-semibold mt-1.5 px-2.5 py-0.5 rounded-full border;
36 }
37</style>