Bar List

1import type { ComponentProps, JSX } from "solid-js"
2import { For, mergeProps, Show, splitProps } from "solid-js"
3import { Dynamic } from "solid-js/web"
4 
5import { cn } from "~/lib/utils"
6 
7type Bar<T> = T & {
8  value: number
9  name: JSX.Element
10  icon?: (props: ComponentProps<"svg">) => JSX.Element
11  href?: string
12  target?: string
13}
14 
15type SortOrder = "ascending" | "descending" | "none"
16 
17type ValueFormatter = (value: number) => string
18 
19const defaultValueFormatter: ValueFormatter = (value: number) => value.toString()
20 
21type BarListProps<T> = ComponentProps<"div"> & {
22  data: Bar<T>[]
23  valueFormatter?: ValueFormatter
24  sortOrder?: SortOrder
25}
26 
27const BarList = <T,>(rawProps: BarListProps<T>) => {
28  const props = mergeProps(
29    {
30      valueFormatter: defaultValueFormatter,
31      sortOrder: "descending" as SortOrder
32    },
33    rawProps
34  )
35  const [local, others] = splitProps(props, ["class", "data", "valueFormatter", "sortOrder"])
36 
37  const sortedData = () => {
38    if (local.sortOrder === "none") {
39      return local.data
40    }
41    return local.data.sort((a, b) =>
42      local.sortOrder === "ascending" ? a.value - b.value : b.value - a.value
43    )
44  }
45 
46  const widths = () => {
47    const maxValue = Math.max(...sortedData().map((item) => item.value), 0)
48    return sortedData().map((item) =>
49      item.value === 0 ? 0 : Math.max((item.value / maxValue) * 100, 2)
50    )
51  }
52 
53  return (
54    <div
55      class={cn("flex flex-col space-y-1.5", local.class)}
56      aria-sort={local.sortOrder}
57      {...others}
58    >
59      <For each={sortedData()}>
60        {(bar, idx) => {
61          return (
62            <div class="row flex w-full justify-between space-x-6">
63              <div class="grow">
64                <div
65                  class={cn("flex h-8 items-center rounded-md bg-secondary px-2")}
66                  style={{
67                    width: `${widths()[idx()]}%`
68                  }}
69                >
70                  <Show when={bar.icon}>
71                    {(icon) => <Dynamic component={icon()} class="mr-2 size-5 flex-none" />}
72                  </Show>
73                  <Show when={bar.href} fallback={<p>{bar.name}</p>}>
74                    {(href) => (
75                      <a
76                        href={href()}
77                        target={bar.target ?? "_blank"}
78                        rel="noreferrer"
79                        class="hover:underline"
80                      >
81                        {bar.name}
82                      </a>
83                    )}
84// … truncated