{
  "id": "github-trending",
  "name": "GitHub Trending",
  "category": "web",
  "tags": ["github", "trending", "repos", "code", "developer", "open source"],
  "description": "Trending GitHub repositories with stars and language filters.",
  "triggers": ["github trending", "trending repos", "popular repositories", "github stars", "open source"],
  "defaultSize": { "w": 5, "h": 6 },
  "source": "function GitHubTrending() {\n  const [repos, setRepos] = React.useState([]);\n  const [lang, setLang] = React.useState('');\n  const [loading, setLoading] = React.useState(false);\n\n  React.useEffect(()=>{\n    setLoading(true);\n    const url = lang\n      ? `https://api.github.com/search/repositories?q=stars:>1000+language:${lang}&sort=stars&order=desc&per_page=15`\n      : 'https://api.github.com/search/repositories?q=stars:>5000&sort=stars&order=desc&per_page=15';\n    fetch(url)\n      .then(r=>r.json())\n      .then(d=>{setRepos(d.items||[]);setLoading(false);})\n      .catch(()=>setLoading(false));\n  },[lang]);\n\n  const languages = ['','JavaScript','Python','TypeScript','Rust','Go','Java','C++','Ruby'];\n\n  return (\n    <div style={{padding:16,fontFamily:'system-ui',height:'100%',display:'flex',flexDirection:'column'}}>\n      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>\n        <span style={{fontSize:18,fontWeight:700}}>GitHub Trending</span>\n        <select value={lang} onChange={e=>setLang(e.target.value)}\n          style={{padding:'4px 8px',borderRadius:6,border:'1px solid #ccc',fontSize:13}}>\n          {languages.map(l=><option key={l} value={l}>{l||'All Languages'}</option>)}\n        </select>\n      </div>\n      {loading && <div style={{textAlign:'center',color:'#888'}}>Loading…</div>}\n      <div style={{flex:1,overflow:'auto'}}>\n        {repos.map(r=> (\n          <a key={r.id} href={r.html_url} target=\"_blank\" rel=\"noopener noreferrer\"\n            style={{display:'block',padding:'8px 0',borderBottom:'1px solid #eee',textDecoration:'none',color:'inherit'}}>\n            <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:2}}>\n              <span style={{fontSize:14,fontWeight:600,color:'#0969DA'}}>{r.full_name}</span>\n              <span style={{fontSize:11,padding:'2px 6px',background:'#ddf4ff',color:'#0969DA',borderRadius:10}}>{r.language}</span>\n            </div>\n            <div style={{fontSize:12,color:'#888'}}>{r.description?.slice(0,80)}…</div>\n            <div style={{fontSize:12,color:'#888',marginTop:2}}>⭐ {r.stargazers_count?.toLocaleString()} · 🍴 {r.forks_count?.toLocaleString()}</div>\n          </a>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<GitHubTrending/>);",
  "placeholders": []
}