Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<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-md -mt-md before:pointer-events-none before:absolute before:z-10 before:ml-2xs before:h-24 before:w-full before:translate-y-md before:bg-ease-in-out-to-b before:from-transparent before:to-transparent before:transition-colors before:duration-150 before:delay-50 before:ease-out before:select-none not-open:has-[summary:hover]:before:from-background-default mb-2xs"> <summary class="flex h-4 origin-top scale-y-50 cursor-pointer gap-px rounded-t transition-transform delay-100 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-md flex flex-wrap items-center justify-center gap-md border-b border-border-default px-md py-xs" > {#each languages as language (language.name)} <div class="flex items-center gap-xs 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>