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 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 border-purple-300 dark:border-purple-700"
21>
22 <label for="sort-by" class="text-purple-800 dark:text-purple-300 mr-1">
23 sort by:
24 </label>
25 <select
26 id="sort-by"
27 value={sortBy}
28 onchange={(e) =>
29 onSortChange((e.target as HTMLSelectElement).value as SortOption)}
30 class="bg-purple-50 dark:bg-purple-900 text-purple-900 dark:text-purple-300 border border-purple-200 dark:border-purple-700 rounded-full px-1 outline-none focus:border-purple-400 min-w-0"
31 >
32 {#each sortOptions as option}
33 <option value={option.value}>{option.label}</option>
34 {/each}
35 </select>
36</div>