Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445<script lang="ts"> import ColorBall from "$lib/components/ui/ColorBall.svelte"; import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "$lib/components/repo/languageColors"; import type { LanguageSlice } from "$lib/components/repo/types";
interface Props { languages: LanguageSlice[]; }
let { languages }: Props = $props();
const colorFor = (name: string) => LANGUAGE_COLORS[name] ?? LANGUAGE_COLOR_FALLBACK; const percent = (language: LanguageSlice) => language.share < 1 ? "<1" : String(language.percentage); const label = (language: LanguageSlice) => `${language.name} ${percent(language)}%`;</script>
<details class="group -mx-4 -mt-4 mb-2"> <summary 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" > {#each languages as language (language.name)} {#if language.share > 0.5} <div title={label(language)} style={`background-color: ${colorFor(language.name)}; flex: ${language.share} 0 0px`} ></div> {/if} {/each} </summary> <div class="mb-4 flex flex-wrap items-center justify-center gap-4 border-b border-border-default px-4 py-2" > {#each languages as language (language.name)} <div class="flex items-center gap-2 typography-paragraph-small"> <ColorBall color={colorFor(language.name)} class="size-2.5" /> <span> {language.name} <span class="text-foreground-subtle">{percent(language)}%</span> </span> </div> {/each} </div></details>