Badge Delta

1
import type { BadgeProps } from "~/components/ui/badge";
2
import type { VariantProps } from "class-variance-authority";
3
import type { Component, JSXElement } from "solid-js";
4

5
import { createEffect, on, Show, splitProps } from "solid-js";
6
import { cva } from "class-variance-authority";
7
import ArrowDownIcon from "lucide-solid/icons/arrow-down";
8
import ArrowDownRightIcon from "lucide-solid/icons/arrow-down-right";
9
import ArrowRightIcon from "lucide-solid/icons/arrow-right";
10
import ArrowUpIcon from "lucide-solid/icons/arrow-up";
11
import ArrowUpRightIcon from "lucide-solid/icons/arrow-up-right";
12

13
import { Badge } from "~/components/ui/badge";
14
import { cn } from "~/lib/utils";
15

16
type DeltaType =
17
  | "increase"
18
  | "moderateIncrease"
19
  | "unchanged"
20
  | "moderateDecrease"
21
  | "decrease";
22

23
const badgeDeltaVariants = cva("", {
24
  variants: {
25
    variant: {
26
      success: "bg-success text-success-foreground hover:bg-success",
27
      warning: "bg-warning text-warning-foreground hover:bg-warning",
28
      error: "bg-error text-error-foreground hover:bg-error",
29
    },
30
  },
31
});
32
type DeltaVariant = NonNullable<
33
  VariantProps<typeof badgeDeltaVariants>["variant"]
34
>;
35

36
const iconMap: {
37
  [key in DeltaType]: (props: { class?: string }) => JSXElement;
38
} = {
39
  increase: (props) => <ArrowUpIcon class={props.class} />,
40
  moderateIncrease: (props) => <ArrowUpRightIcon class={props.class} />,
41
  unchanged: (props) => <ArrowRightIcon class={props.class} />,
42
  moderateDecrease: (props) => <ArrowDownRightIcon class={props.class} />,
43
  decrease: (props) => <ArrowDownIcon class={props.class} />,
44
};
45

46
const variantMap: { [key in DeltaType]: DeltaVariant } = {
47
  increase: "success",
48
  moderateIncrease: "success",
49
  unchanged: "warning",
50
  moderateDecrease: "error",
51
  decrease: "error",
52
};
53

54
type BadgeDeltaProps = Omit<BadgeProps, "variant"> & {
55
  deltaType: DeltaType;
56
  iconLocation?: "left" | "right";
57
};
58

59
const BadgeDelta: Component<BadgeDeltaProps> = (props) => {
60
  const [local, others] = splitProps(props, [
61
    "class",
62
    "children",
63
    "deltaType",
64
    "iconLocation",
65
  ]);
66

67
  // eslint-disable-next-line solid/reactivity
68
  let Icon = iconMap[local.deltaType];
69
  createEffect(
70
    on(
71
      () => local.deltaType,
72
      () => {
73
        Icon = iconMap[local.deltaType];
74
      },
75
    ),
76
  );
77

78
  return (
79
    <Badge
80
      class={cn(
81
        badgeDeltaVariants({ variant: variantMap[local.deltaType] }),
82
        local.class,
83
      )}
84
      {...others}
85
    >
86
      <span class="flex gap-1">
87
        <Show
88
          when={
89
            local.iconLocation === undefined || local.iconLocation === "left"
90
          }
91
        >
92
          <Icon class="size-4" />
93
        </Show>
94
        {local.children}
95
        <Show when={local.iconLocation === "right"}>
96
          <Icon class="size-4" />
97
        </Show>
98
      </span>
99
    </Badge>
100
  );
101
};
102

103
export { BadgeDelta };