Badge Delta

1import type { Component, JSXElement } from "solid-js"
2import { createEffect, on, splitProps } from "solid-js"
3 
4import type { VariantProps } from "class-variance-authority"
5import { cva } from "class-variance-authority"
6 
7import { cn } from "~/lib/utils"
8import type { BadgeProps } from "~/registry/ui/badge"
9import { Badge } from "~/registry/ui/badge"
10 
11type DeltaType = "increase" | "moderateIncrease" | "unchanged" | "moderateDecrease" | "decrease"
12 
13const badgeDeltaVariants = cva("", {
14  variants: {
15    variant: {
16      success: "bg-success text-success-foreground hover:bg-success",
17      warning: "bg-warning text-warning-foreground hover:bg-warning",
18      error: "bg-error text-error-foreground hover:bg-error"
19    }
20  }
21})
22type DeltaVariant = NonNullable<VariantProps<typeof badgeDeltaVariants>["variant"]>
23 
24const iconMap: { [key in DeltaType]: (props: { class?: string }) => JSXElement } = {
25  increase: (props) => (
26    <svg
27      xmlns="http://www.w3.org/2000/svg"
28      viewBox="0 0 24 24"
29      fill="none"
30      stroke="currentColor"
31      stroke-width="2"
32      stroke-linecap="round"
33      stroke-linejoin="round"
34      class={props.class}
35    >
36      <path d="M12 5l0 14" />
37      <path d="M18 11l-6 -6" />
38      <path d="M6 11l6 -6" />
39    </svg>
40  ),
41  moderateIncrease: (props) => (
42    <svg
43      xmlns="http://www.w3.org/2000/svg"
44      viewBox="0 0 24 24"
45      fill="none"
46      stroke="currentColor"
47      stroke-width="2"
48      stroke-linecap="round"
49      stroke-linejoin="round"
50      class={props.class}
51    >
52      <path d="M17 7l-10 10" />
53      <path d="M8 7l9 0l0 9" />
54    </svg>
55  ),
56  unchanged: (props) => (
57    <svg
58      xmlns="http://www.w3.org/2000/svg"
59      viewBox="0 0 24 24"
60      fill="none"
61      stroke="currentColor"
62      stroke-width="2"
63      stroke-linecap="round"
64      stroke-linejoin="round"
65      class={props.class}
66    >
67      <path d="M5 12l14 0" />
68      <path d="M13 18l6 -6" />
69      <path d="M13 6l6 6" />
70    </svg>
71  ),
72  moderateDecrease: (props) => (
73    <svg
74      xmlns="http://www.w3.org/2000/svg"
75      viewBox="0 0 24 24"
76      fill="none"
77      stroke="currentColor"
78      stroke-width="2"
79      stroke-linecap="round"
80      stroke-linejoin="round"
81      class={props.class}
82    >
83      <path d="M7 7l10 10" />
84      <path d="M17 8l0 9l-9 0" />
85    </svg>
86  ),
87  decrease: (props) => (
88    <svg
89      xmlns="http://www.w3.org/2000/svg"
90      viewBox="0 0 24 24"
91      fill="none"
92      stroke="currentColor"
93// … truncated