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