tracks lexicons and how many times they appeared on the jetstream
ptr.pet
1<script lang="ts">
2 import { formatNumber } from "$lib/format";
3
4 const colorClasses = {
5 green: {
6 bg: "from-green-50 to-green-100 dark:from-green-900 dark:to-green-800",
7 border: "border-green-200 dark:border-green-800",
8 titleText: "text-green-700 dark:text-green-400",
9 valueText: "text-green-900 dark:text-green-200",
10 },
11 red: {
12 bg: "from-red-50 to-red-100 dark:from-red-900 dark:to-red-800",
13 border: "border-red-200 dark:border-red-800",
14 titleText: "text-red-700 dark:text-red-400",
15 valueText: "text-red-900 dark:text-red-200",
16 },
17 turqoise: {
18 bg: "from-teal-50 to-teal-100 dark:from-teal-900 dark:to-teal-800",
19 border: "border-teal-200 dark:border-teal-800",
20 titleText: "text-teal-700 dark:text-teal-400",
21 valueText: "text-teal-900 dark:text-teal-200",
22 },
23 orange: {
24 bg: "from-orange-50 to-orange-100 dark:from-orange-900 dark:to-orange-800",
25 border: "border-orange-200 dark:border-orange-800",
26 titleText: "text-orange-700 dark:text-orange-400",
27 valueText: "text-orange-900 dark:text-orange-200",
28 },
29 };
30
31 interface Props {
32 title: string;
33 value: number;
34 colorScheme: keyof typeof colorClasses;
35 }
36
37 let { title, value, colorScheme }: Props = $props();
38
39 const colors = $derived(colorClasses[colorScheme]);
40</script>
41
42<div class="bg-gradient-to-r {colors.bg} p-3 rounded-lg border {colors.border}">
43 <h3 class="text-base font-medium {colors.titleText} mb-2">
44 {title}
45 </h3>
46 <p class="text-xl md:text-2xl font-bold {colors.valueText}">
47 {formatNumber(value)}
48 </p>
49</div>