Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108<script lang="ts"> import { formatBytes } from "#lib/api/blob.ts"; import ColorBall from "#lib/components/ui/ColorBall.svelte"; import Card from "#lib/components/ui/Card.svelte"; import Tooltip from "#lib/components/ui/Tooltip.svelte"; import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "#lib/components/repo/languageColors.ts"; import type { LanguageSlice } from "#lib/components/repo/types.ts";
interface Props { languages: LanguageSlice[]; }
let { languages }: Props = $props();
const totalSize = $derived(languages.reduce((sum, language) => sum + language.size, 0)); const colorFor = (name: string) => LANGUAGE_COLORS[name] ?? LANGUAGE_COLOR_FALLBACK; const percent = (language: LanguageSlice) => language.share < 1 ? "<1" : String(language.percentage);</script>
<Card padding="none" class="flex flex-col gap-lg p-md"> {#if languages.length === 0} <div class="flex flex-col gap-2xs"> <p class="font-medium text-foreground-default">No languages detected</p> <p class="typography-paragraph-small text-foreground-muted"> Language stats appear once the default branch contains source files. </p> </div> {:else} <dl class="flex flex-wrap gap-x-xl gap-y-sm"> <div class="flex flex-col gap-3xs"> <dt class="typography-paragraph-small text-foreground-muted">Languages</dt> <dd class="typography-heading-4 tabular-nums">{languages.length}</dd> </div> <div class="flex flex-col gap-3xs"> <dt class="typography-paragraph-small text-foreground-muted">Total size</dt> <dd class="typography-heading-4 tabular-nums">{formatBytes(totalSize)}</dd> </div> <div class="flex flex-col gap-3xs"> <dt class="typography-paragraph-small text-foreground-muted">Primary language</dt> <dd class="typography-heading-4">{languages[0]?.name}</dd> </div> </dl>
<div class="flex h-2 gap-px overflow-hidden rounded-full"> {#each languages as language (language.name)} <div style:flex={`${language.share} 0 2px`}> <Tooltip class="block h-full" content={`${language.name}: ${percent(language)}%, ${formatBytes(language.size)}`} delay={0} group > <span class="block h-full" style:background-color={colorFor(language.name)} ></span> </Tooltip> </div> {/each} </div>
<table class="w-full typography-paragraph-small"> <thead class="text-foreground-muted"> <tr> <th class="pb-xs text-left font-normal">Language</th> <th class="pb-xs text-right font-normal">Size</th> <th class="pb-xs text-right font-normal">Share</th> <td class="hidden w-1/3 md:table-cell" aria-hidden="true"></td> </tr> </thead> <tbody class="divide-y divide-border-default"> {#each languages as language (language.name)} <tr class="group"> <td class="py-xs group-last:pb-0"> <span class="flex items-center gap-xs"> <ColorBall color={colorFor(language.name)} class="size-2.5" /> {language.name} </span> </td> <td class="py-xs text-right text-foreground-muted tabular-nums group-last:pb-0" > {formatBytes(language.size)} </td> <td class="py-xs pl-md text-right tabular-nums group-last:pb-0" >{percent(language)}%</td > <td class="hidden py-xs pl-md group-last:pb-0 md:table-cell" aria-hidden="true" > <div class="h-1 overflow-hidden rounded-full bg-background-inset"> <div class="h-full rounded-full" style:background-color={colorFor(language.name)} style:width={`max(${language.share}%, 2px)`} ></div> </div> </td> </tr> {/each} </tbody> </table> {/if}</Card>