LanguageBar
A stacked color bar with a legend showing language percentages for a repository.
Import
import { LanguageBar } from "@gumtree/ui/LanguageBar" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
languages* | LanguageEntry[] | - | Array of { name, percentage, color } entries |
Examples
Multiple Languages
A repository with six detected languages.
Rust 62%Swift 18%Kotlin 8%Fluent 6%YAML 4%Other 2%
< LanguageBar
languages = { [
{ name : "Rust" , percentage : 62 , color : "#dea584" } ,
{ name : "Swift" , percentage : 18 , color : "#89b4fa" } ,
{ name : "Kotlin" , percentage : 8 , color : "#f9e2af" } ,
{ name : "Fluent" , percentage : 6 , color : "#a6e3a1" } ,
{ name : "YAML" , percentage : 4 , color : "#cba6f7" } ,
{ name : "Other" , percentage : 2 , color : "#ccc" } ,
] }
/> Two Languages
A simpler repository with two languages.
TypeScript 85%CSS 15%
< LanguageBar
languages = { [
{ name : "TypeScript" , percentage : 85 , color : "#3178c6" } ,
{ name : "CSS" , percentage : 15 , color : "#563d7c" } ,
] }
/>