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:T19da,"use client"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; interface GitHubRepoCardProps extends React.HTMLAttributes { owner: string; repo: string; staticData?: { name: string; description: string | null; stargazers_count: number; forks_count: number; language: string | null; }; } function formatNumber(num: number): string { if (num >= 1000000) { return `${(num / 1000000).toFixed(1)}M`; } if (num >= 1000) { return `${(num / 1000).toFixed(1)}K`; } return num.toString(); } 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", }; function StarIcon({ className }: { className?: string }) { return ( ); } function ForkIcon({ className }: { className?: string }) { return ( ); } function RepoIcon({ className }: { className?: string }) { return ( ); } export function GitHubRepoCard({ owner, repo, staticData, className, ...props }: GitHubRepoCardProps) { const [data, setData] = useState(staticData || null); 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}` ); if (!response.ok) { throw new Error("Failed to fetch repository"); } const repoData = await response.json(); setData({ name: repoData.name, description: repoData.description, stargazers_count: repoData.stargazers_count, forks_count: repoData.forks_count, language: repoData.language, }); } catch (err) { setError(err instanceof Error ? err.message : "Unknown error"); } finally { setLoading(false); } } fetchData(); }, [owner, repo, staticData]); if (loading) { return (

); } if (error || !data) { return (

{error || "No data"}

); } const languageColor = data.language ? LANGUAGE_COLORS[data.language] || "#8b8b8b" : null; return (

{owner}/{data.name}

{data.description && (

{data.description}

)}

{languageColor && ( {data.language} )} {formatNumber(data.stargazers_count)} {formatNumber(data.forks_count)}

); } 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-repo-card.json","proxyUrl":"https://shadcnregistry.com/r/elements/github-repo-card","itemId":"@elements/github-repo-card"}],["$","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-repo-card/components/elements/github-repo-card.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

GitHub Repo Card

Installation

Files

components

Styles