{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "github-languages",
  "title": "GitHub Languages",
  "description": "A visual language breakdown bar showing the programming languages used in a GitHub repository with percentage labels.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/blocks/github/github-languages/components/elements/github-languages.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface LanguageData {\n  name: string;\n  percentage: number;\n  color: string;\n}\n\ninterface GitHubLanguagesProps extends React.HTMLAttributes<HTMLDivElement> {\n  owner: string;\n  repo: string;\n  staticData?: LanguageData[];\n  showLabels?: boolean;\n}\n\nconst LANGUAGE_COLORS: Record<string, string> = {\n  TypeScript: \"#3178c6\",\n  JavaScript: \"#f1e05a\",\n  Python: \"#3572A5\",\n  Rust: \"#dea584\",\n  Go: \"#00ADD8\",\n  Java: \"#b07219\",\n  \"C++\": \"#f34b7d\",\n  C: \"#555555\",\n  Ruby: \"#701516\",\n  PHP: \"#4F5D95\",\n  Swift: \"#F05138\",\n  Kotlin: \"#A97BFF\",\n  Dart: \"#00B4AB\",\n  Vue: \"#41b883\",\n  CSS: \"#563d7c\",\n  HTML: \"#e34c26\",\n  Shell: \"#89e051\",\n  Scala: \"#c22d40\",\n  Elixir: \"#6e4a7e\",\n  Haskell: \"#5e5086\",\n  Lua: \"#000080\",\n  R: \"#198CE7\",\n  Julia: \"#a270ba\",\n  Clojure: \"#db5855\",\n  Zig: \"#ec915c\",\n  MDX: \"#fcb32c\",\n  SCSS: \"#c6538c\",\n  Svelte: \"#ff3e00\",\n  Astro: \"#ff5a03\",\n};\n\nexport function GitHubLanguages({\n  owner,\n  repo,\n  staticData,\n  showLabels = true,\n  className,\n  ...props\n}: GitHubLanguagesProps) {\n  const [data, setData] = useState<LanguageData[]>(staticData || []);\n  const [loading, setLoading] = useState(!staticData);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (staticData) return;\n\n    async function fetchData() {\n      try {\n        setLoading(true);\n        setError(null);\n\n        const response = await fetch(\n          `https://api.github.com/repos/${owner}/${repo}/languages`\n        );\n\n        if (!response.ok) {\n          throw new Error(\"Failed to fetch languages\");\n        }\n\n        const languagesData: Record<string, number> = await response.json();\n        const total = Object.values(languagesData).reduce((a, b) => a + b, 0);\n\n        const languages: LanguageData[] = Object.entries(languagesData)\n          .map(([name, bytes]) => ({\n            name,\n            percentage: (bytes / total) * 100,\n            color: LANGUAGE_COLORS[name] || \"#8b8b8b\",\n          }))\n          .sort((a, b) => b.percentage - a.percentage);\n\n        setData(languages);\n      } catch (err) {\n        setError(err instanceof Error ? err.message : \"Unknown error\");\n      } finally {\n        setLoading(false);\n      }\n    }\n\n    fetchData();\n  }, [owner, repo, staticData]);\n\n  if (loading) {\n    return (\n      <div\n        data-slot=\"github-languages\"\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        <div className=\"h-2 w-full bg-muted rounded-full animate-pulse\" />\n        <div className=\"flex flex-wrap gap-x-4 gap-y-1\">\n          {[1, 2, 3].map((i) => (\n            <div\n              key={i}\n              className=\"h-4 w-20 bg-muted rounded animate-pulse\"\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div\n        data-slot=\"github-languages\"\n        className={cn(\"text-sm text-destructive\", className)}\n        {...props}\n      >\n        {error}\n      </div>\n    );\n  }\n\n  if (data.length === 0) {\n    return (\n      <div\n        data-slot=\"github-languages\"\n        className={cn(\"text-sm text-muted-foreground\", className)}\n        {...props}\n      >\n        No languages detected\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"github-languages\"\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    >\n      <div className=\"flex h-2 w-full overflow-hidden rounded-full\">\n        {data.map((lang, index) => (\n          <div\n            key={lang.name}\n            className=\"h-full transition-all\"\n            style={{\n              width: `${lang.percentage}%`,\n              backgroundColor: lang.color,\n              marginLeft: index > 0 ? \"1px\" : 0,\n            }}\n            title={`${lang.name}: ${lang.percentage.toFixed(1)}%`}\n          />\n        ))}\n      </div>\n\n      {showLabels && (\n        <div className=\"flex flex-wrap gap-x-4 gap-y-1\">\n          {data.slice(0, 6).map((lang) => (\n            <span\n              key={lang.name}\n              className=\"flex items-center gap-1.5 text-xs text-muted-foreground\"\n            >\n              <span\n                className=\"w-2.5 h-2.5 rounded-full\"\n                style={{ backgroundColor: lang.color }}\n              />\n              <span>{lang.name}</span>\n              <span className=\"text-muted-foreground/60\">\n                {lang.percentage.toFixed(1)}%\n              </span>\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Fetches language statistics from GitHub API. Shows a colored bar with language percentages. Supports hiding labels with showLabels={false}.",
  "categories": [
    "github"
  ],
  "type": "registry:block"
}