tracks lexicons and how many times they appeared on the jetstream
ptr.pet
1<script lang="ts">
2 import type { SortOption } from "$lib/types";
3
4 interface Props {
5 sortBy: SortOption;
6 onSortChange: (value: SortOption) => void;
7 }
8
9 let { sortBy, onSortChange }: Props = $props();
10
11 const sortOptions = [
12 { value: "total" as const, label: "total count" },
13 { value: "created" as const, label: "created count" },
14 { value: "deleted" as const, label: "deleted count" },
15 { value: "date" as const, label: "newest first" },
16 ];
17</script>
18
19<div
20 class="wsbadge !pl-2 !px-1 !mt-0 !font-normal bg-purple-100 hover:bg-purple-200 border-purple-300"
21>
22 <label for="sort-by" class="text-purple-800 mr-1"> sort by: </label>
23 <select
24 id="sort-by"
25 value={sortBy}
26 onchange={(e) =>
27 onSortChange((e.target as HTMLSelectElement).value as SortOption)}
28 class="bg-purple-50 text-purple-900 border border-purple-200 rounded-full px-1 outline-none focus:bg-white focus:border-purple-400 min-w-0"
29 >
30 {#each sortOptions as option}
31 <option value={option.value}>{option.label}</option>
32 {/each}
33 </select>
34</div>
35
36<style lang="postcss">
37 @reference "../../app.css";
38 .wsbadge {
39 @apply text-sm font-semibold mt-1.5 px-2.5 py-0.5 rounded-full border;
40 }
41</style>