alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "./language-colors";
3 import type { LanguageSlice } from "./types";
4
5 interface Props {
6 languages: LanguageSlice[];
7 }
8
9 let { languages }: Props = $props();
10
11 const colorFor = (name: string) => LANGUAGE_COLORS[name] ?? LANGUAGE_COLOR_FALLBACK;
12 const percent = (language: LanguageSlice) =>
13 language.share < 1 ? "<1" : String(language.percentage);
14 const label = (language: LanguageSlice) => `${language.name} ${percent(language)}%`;
15</script>
16
17<details class="group -mx-6 -mt-4 mb-4">
18 <summary
19 class="flex h-4 origin-top scale-y-50 cursor-pointer gap-px overflow-hidden rounded-t transition-transform group-open:scale-y-100 hover:scale-y-100"
20 >
21 {#each languages as language (language.name)}
22 <div
23 title={label(language)}
24 style={`background-color: ${colorFor(language.name)}; flex: ${language.share} 0 0px`}
25 ></div>
26 {/each}
27 </summary>
28 <div
29 class="flex flex-wrap items-center justify-center gap-4 border-b border-border-default px-4 py-2"
30 >
31 {#each languages as language (language.name)}
32 <div class="flex items-center gap-2 typography-paragraph-small">
33 <span
34 class="inline-block size-2.5 shrink-0 rounded-full"
35 style={`background-color: ${colorFor(language.name)}`}
36 ></span>
37 <span>
38 {language.name}
39 <span class="text-foreground-subtle">{percent(language)}%</span>
40 </span>
41 </div>
42 {/each}
43 </div>
44</details>