{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "github",
  "type": "registry:component",
  "title": "GitHub Graph",
  "description": "A GitHub component for displaying contribution graph with custom styling.",
  "files": [
    {
      "path": "registry/v3cn/github/github.tsx",
      "content": "\"use client\";\n\nimport { Activity, ActivityCalendar } from \"react-activity-calendar\";\nimport { memo, useCallback, useEffect, useState } from \"react\";\n\nimport { useTheme } from \"next-themes\";\n\n/**\n * Props for the GitHub contribution graph component\n */\ntype GithubGraphProps = {\n  /** GitHub username to fetch contributions for */\n  username: string;\n  /** Margin between contribution blocks in pixels */\n  blockMargin?: number;\n  /** Custom color palette for light theme */\n  lightColorPalette?: string[];\n  /** Custom color palette for dark theme */\n  darkColorPalette?: string[];\n};\n\n/**\n * API response type for GitHub contributions\n */\ntype GithubApiResponse = {\n  data: Activity[];\n  error?: string;\n};\n\nconst DEFAULT_LIGHT_PALETTE = [\n  \"#ebedf0\",\n  \"#9be9a8\",\n  \"#40c463\",\n  \"#30a14e\",\n  \"#216e39\",\n];\n\nconst DEFAULT_DARK_PALETTE = [\n  \"#1e1e2f\",\n  \"#5a3e7a\",\n  \"#7e5aa2\",\n  \"#a87cc3\",\n  \"#d9a9e6\",\n];\n\n/**\n * GitHub contribution graph component that displays user's contribution activity\n */\nexport const GithubGraph = memo(({\n  username,\n  blockMargin,\n  lightColorPalette = DEFAULT_LIGHT_PALETTE,\n  darkColorPalette = DEFAULT_DARK_PALETTE,\n}: GithubGraphProps) => {\n  const [contribution, setContribution] = useState<Activity[]>([]);\n  const [loading, setIsLoading] = useState<boolean>(true);\n  const [error, setError] = useState<string | null>(null);\n  const { theme } = useTheme();\n\n  const fetchData = useCallback(async () => {\n    try {\n      setError(null);\n      setIsLoading(true);\n      const contributions = await fetchContributionData(username);\n      setContribution(contributions);\n    } catch (error) {\n      setError(error instanceof Error ? error.message : \"Failed to fetch contribution data\");\n      setContribution([]);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [username]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  const label = {\n    totalCount: `{{count}} contributions in the last year`,\n  };\n\n  if (error) {\n    return (\n      <div className=\"text-red-500 p-4 text-center\">\n        Error: {error}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      {loading && (\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white\"></div>\n        </div>\n      )}\n      <ActivityCalendar\n        data={contribution}\n        maxLevel={4}\n        blockMargin={blockMargin ?? 2}\n        loading={loading}\n        labels={label}\n        theme={{\n          light: lightColorPalette,\n          dark: darkColorPalette,\n        }}\n        colorScheme={theme === \"dark\" ? \"dark\" : \"light\"}\n      />\n    </div>\n  );\n});\n\nGithubGraph.displayName = \"GithubGraph\";\n\n/**\n * Fetches GitHub contribution data for a given username\n */\nasync function fetchContributionData(username: string): Promise<Activity[]> {\n  try {\n    const response = await fetch(`https://github.vineet.pro/api/${username}`);\n    \n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n\n    let responseBody: GithubApiResponse;\n    try {\n      responseBody = await response.json();\n    } catch (parseError) {\n      throw new Error(\"Failed to parse response data\", { cause: parseError as Error });\n    }\n\n    if (!responseBody.data) {\n      throw new Error(\"No contribution data received\");\n    }\n\n    return responseBody.data;\n  } catch (error) {\n    if (error instanceof Error) {\n      console.error(\"Error fetching GitHub contributions:\", error.message);\n      return [];\n    }\n    console.error(\"An unexpected error occurred while fetching GitHub contributions\");\n    return [];\n  }\n}",
      "type": "registry:component",
      "target": "components/github.tsx"
    }
  ]
}