Delta Bar

1import { mergeProps, Show, splitProps, type Component, type ComponentProps } from "solid-js"
2 
3import { cn } from "~/lib/utils"
4 
5type DeltaBarProps = ComponentProps<"div"> & {
6  value: number
7  isIncreasePositive?: boolean
8}
9 
10const DeltaBar: Component<DeltaBarProps> = (rawProps) => {
11  const props = mergeProps(
12    {
13      isIncreasePositive: true
14    },
15    rawProps
16  )
17  const [local, others] = splitProps(props, ["value", "isIncreasePositive", "class"])
18 
19  const barColor = () => 
20    (local.value > 0 && local.isIncreasePositive) || (local.value < 0 && !local.isIncreasePositive)
21      ? "bg-success-foreground"
22      : "bg-error-foreground"
23 
24  return (
25    <div
26      class={cn("relative flex h-2 w-full items-center rounded-full bg-secondary", local.class)}
27      {...others}
28    >
29      <div class="flex h-full w-1/2 justify-end">
30        <Show when={local.value < 0}>
31          <div
32            class={cn("rounded-l-full", barColor())}
33            style={{ width: `${Math.abs(local.value)}%` }}
34          />
35        </Show>
36      </div>
37      <div class={cn("z-10 h-4 w-1 rounded-full ring-2 ring-background", barColor())} />
38      <div class="flex h-full w-1/2 justify-start">
39        <Show when={local.value > 0}>
40          <div
41            class={cn("rounded-r-full", barColor())}
42            style={{ width: `${Math.abs(local.value)}%` }}
43          />
44        </Show>
45      </div>
46    </div>
47  )
48}
49 
50export { DeltaBar }
51export type { DeltaBarProps }
52