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