gap

const json = await res.json();

  if (!res.ok || json.errors) {

    throw new Error(json.errors?.[0]?.message || `GraphQL error ${res.status}`);

  }

  const cal = json.data.user.contributionsCollection.contributionCalendar;

  const cell = 10, gap = 2;

  const rows = 7, cols = cal.weeks.length;

  const width = cols * (cell + gap) + gap;

  const height = rows * (cell + gap) + gap + 20;

  let rects = "";

  cal.weeks.forEach((w, x) => {

    w.contributionDays.forEach((d, y) => {

      const cx = gap + x * (cell + gap);

      const cy = gap + y * (cell + gap);

      rects += `<rect x="${cx}" y="${cy}" width="${cell}" height="${cell}" rx="2" ry="2" fill="${d.color || "#ebedf0"...
    });

  });

  const label = `<text x="${gap}" y="${height - 4}" font-size="10" fill="#666">Total: ${cal.totalContributions}</text...
  return `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg...
}


function renderEventHeatmap(events) {

  if (!Array.isArray(events) || events.length === 0)

    return '<div class="muted">No recent public activity.</div>';

const { data: javaRepos } = useRepositories("stars:>10000 language:java");

  return (
    <div>
      <Hero />
      <div className="container grid grid-cols-1 gap-4 py-8 mx-auto md:grid-cols-2">
        <RepositoriesTable
          label="Most Popular Javascript"
          repositories={jsRepos}
        />
        <RepositoriesTable
          label="Most Popular Typescript"
          repositories={tsRepos}
        />
        <RepositoriesTable label="Most Popular Rust" repositories={rustRepos} />
        <RepositoriesTable label="Most Popular Go" repositories={goRepos} />
        <RepositoriesTable
          label="Most Popular Python"
          repositories={pythonRepos}
        />
        <RepositoriesTable label="Most Popular Java" repositories={javaRepos} />
      </div>
    </div>
  );
}