4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T11c2,"use client"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; interface LanguageData { name: string; percentage: number; color: string; } interface GitHubLanguagesProps extends React.HTMLAttributes { owner: string; repo: string; staticData?: LanguageData[]; showLabels?: boolean; } const LANGUAGE_COLORS: Record = { TypeScript: "#3178c6", JavaScript: "#f1e05a", Python: "#3572A5", Rust: "#dea584", Go: "#00ADD8", Java: "#b07219", "C++": "#f34b7d", C: "#555555", Ruby: "#701516", PHP: "#4F5D95", Swift: "#F05138", Kotlin: "#A97BFF", Dart: "#00B4AB", Vue: "#41b883", CSS: "#563d7c", HTML: "#e34c26", Shell: "#89e051", Scala: "#c22d40", Elixir: "#6e4a7e", Haskell: "#5e5086", Lua: "#000080", R: "#198CE7", Julia: "#a270ba", Clojure: "#db5855", Zig: "#ec915c", MDX: "#fcb32c", SCSS: "#c6538c", Svelte: "#ff3e00", Astro: "#ff5a03", }; export function GitHubLanguages({ owner, repo, staticData, showLabels = true, className, ...props }: GitHubLanguagesProps) { const [data, setData] = useState(staticData || []); const [loading, setLoading] = useState(!staticData); const [error, setError] = useState(null); useEffect(() => { if (staticData) return; async function fetchData() { try { setLoading(true); setError(null); const response = await fetch( `https://api.github.com/repos/${owner}/${repo}/languages` ); if (!response.ok) { throw new Error("Failed to fetch languages"); } const languagesData: Record = await response.json(); const total = Object.values(languagesData).reduce((a, b) => a + b, 0); const languages: LanguageData[] = Object.entries(languagesData) .map(([name, bytes]) => ({ name, percentage: (bytes / total) * 100, color: LANGUAGE_COLORS[name] || "#8b8b8b", })) .sort((a, b) => b.percentage - a.percentage); setData(languages); } catch (err) { setError(err instanceof Error ? err.message : "Unknown error"); } finally { setLoading(false); } } fetchData(); }, [owner, repo, staticData]); if (loading) { return (

{[1, 2, 3].map((i) => (

))}

); } if (error) { return (

{error}

); } if (data.length === 0) { return (

No languages detected

); } return (

{data.map((lang, index) => (

0 ? "1px" : 0, }} title={`${lang.name}: ${lang.percentage.toFixed(1)}%`} /> ))}

{showLabels && (

{data.slice(0, 6).map((lang) => ( {lang.name} {lang.percentage.toFixed(1)}% ))}

)}

); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.tryelements.dev/r/github-languages.json","proxyUrl":"https://shadcnregistry.com/r/elements/github-languages","itemId":"@elements/github-languages"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/default/blocks/github/github-languages/components/elements/github-languages.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

GitHub Languages

Installation

Files

components

Styles