blob: a5cb5b40d2224625e263751b8fa09ae0c7ddd531 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
import { Index, createMemo } from "solid-js"
import { AnimatedCountLabel } from "./tool-count-label"
export type CountItem = {
key: string
count: number
one: string
other: string
}
export function AnimatedCountList(props: { items: CountItem[]; fallback?: string; class?: string }) {
const visible = createMemo(() => props.items.filter((item) => item.count > 0))
const fallback = createMemo(() => props.fallback ?? "")
const showEmpty = createMemo(() => visible().length === 0 && fallback().length > 0)
return (
<span data-component="tool-count-summary" class={props.class}>
<span data-slot="tool-count-summary-empty" data-active={showEmpty() ? "true" : "false"}>
<span data-slot="tool-count-summary-empty-inner">{fallback()}</span>
</span>
<Index each={props.items}>
{(item, index) => {
const active = createMemo(() => item().count > 0)
const hasPrev = createMemo(() => {
for (let i = index - 1; i >= 0; i--) {
if (props.items[i].count > 0) return true
}
return false
})
return (
<>
<span data-slot="tool-count-summary-prefix" data-active={active() && hasPrev() ? "true" : "false"}>
,
</span>
<span data-slot="tool-count-summary-item" data-active={active() ? "true" : "false"}>
<span data-slot="tool-count-summary-item-inner">
<AnimatedCountLabel
one={item().one}
other={item().other}
count={Math.max(0, Math.round(item().count))}
/>
</span>
</span>
</>
)
}}
</Index>
</span>
)
}
|
