Skip to content

Commit 76f15da

Browse files
amide-initclaude
amide-init
and
claude
committed
fix: hacker StatsSection 2-column grid layout for charts
All 4 chart panels now display in a 2-column grid on md+ screens with bordered panels, reducing BAR_WIDTH to 22 to fit half-width columns. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent c330aeb commit 76f15da

1 file changed

Lines changed: 66 additions & 63 deletions

File tree

‎src/templates/hacker/StatsSection.tsx‎

Lines changed: 66 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ type Stats = {
2020
topReposByStars: RepoStarsData[]
2121
}
2222

23-
const BAR_WIDTH = 28
23+
const BAR_WIDTH = 22
2424

2525
function AsciiBar({ pct, color = 'text-green-500' }: { pct: number; color?: string }) {
2626
const filled = Math.round((pct / 100) * BAR_WIDTH)
2727
const empty = BAR_WIDTH - filled
2828
return (
29-
<span className="font-mono text-xs">
29+
<span className="font-mono text-xs leading-none">
3030
<span className={color}>{'█'.repeat(filled)}</span>
31-
<span className="text-green-900">{'░'.repeat(empty)}</span>
31+
<span className="text-green-900/60">{'░'.repeat(empty)}</span>
3232
</span>
3333
)
3434
}
@@ -77,71 +77,74 @@ export default function StatsSection({ stats }: { stats: Stats | null }) {
7777
<p className="text-xs text-green-800 mt-2 select-none">{'─'.repeat(52)}</p>
7878
</div>
7979

80-
{/* Language distribution */}
81-
{languageDistribution.length > 0 && (
82-
<div>
83-
<p className="text-xs text-green-600 mb-2">LANGUAGE_DISTRIBUTION</p>
84-
<div className="space-y-1">
85-
{languageDistribution.slice(0, 8).map((lang, i) => (
86-
<div key={lang.language} className="flex items-center gap-2 text-xs">
87-
<span className="w-24 shrink-0 truncate text-green-700">{lang.language}</span>
88-
<AsciiBar pct={lang.percentage} color={BAR_COLORS[i % BAR_COLORS.length]} />
89-
<span className="text-green-800 w-10 text-right">{lang.percentage}%</span>
90-
</div>
91-
))}
80+
{/* 2-column chart grid */}
81+
<div className="grid gap-6 md:grid-cols-2">
82+
{/* Language distribution */}
83+
{languageDistribution.length > 0 && (
84+
<div className="border border-green-900/40 bg-[#030d03] p-4">
85+
<p className="mb-3 text-xs text-green-600">LANGUAGE_DISTRIBUTION</p>
86+
<div className="space-y-1.5">
87+
{languageDistribution.slice(0, 8).map((lang, i) => (
88+
<div key={lang.language} className="flex items-center gap-2 text-xs">
89+
<span className="w-20 shrink-0 truncate text-green-700">{lang.language}</span>
90+
<AsciiBar pct={lang.percentage} color={BAR_COLORS[i % BAR_COLORS.length]} />
91+
<span className="w-8 shrink-0 text-right text-green-800">{lang.percentage}%</span>
92+
</div>
93+
))}
94+
</div>
9295
</div>
93-
</div>
94-
)}
95-
96-
{/* Repo activity by year */}
97-
{activityByYear.length > 0 && (
98-
<div>
99-
<p className="text-xs text-green-600 mb-2">REPO_ACTIVITY_BY_YEAR</p>
100-
<div className="space-y-1">
101-
{activityByYear.map((row) => (
102-
<div key={row.year} className="flex items-center gap-2 text-xs">
103-
<span className="w-10 shrink-0 text-green-700">{row.year}</span>
104-
<AsciiBar pct={(row.repos / maxRepos) * 100} color="text-cyan-600" />
105-
<span className="text-green-800">{row.repos}</span>
106-
</div>
107-
))}
96+
)}
97+
98+
{/* Repo activity by year */}
99+
{activityByYear.length > 0 && (
100+
<div className="border border-green-900/40 bg-[#030d03] p-4">
101+
<p className="mb-3 text-xs text-green-600">REPO_ACTIVITY_BY_YEAR</p>
102+
<div className="space-y-1.5">
103+
{activityByYear.map((row) => (
104+
<div key={row.year} className="flex items-center gap-2 text-xs">
105+
<span className="w-10 shrink-0 text-green-700">{row.year}</span>
106+
<AsciiBar pct={(row.repos / maxRepos) * 100} color="text-cyan-600" />
107+
<span className="w-6 shrink-0 text-right text-green-800">{row.repos}</span>
108+
</div>
109+
))}
110+
</div>
108111
</div>
109-
</div>
110-
)}
111-
112-
{/* Commit activity */}
113-
{commitActivityByYear && commitActivityByYear.length > 0 && (
114-
<div>
115-
<p className="text-xs text-green-600 mb-2">COMMIT_ACTIVITY_BY_YEAR</p>
116-
<div className="space-y-1">
117-
{commitActivityByYear.map((row) => (
118-
<div key={row.year} className="flex items-center gap-2 text-xs">
119-
<span className="w-10 shrink-0 text-green-700">{row.year}</span>
120-
<AsciiBar pct={(row.commits / maxCommits) * 100} color="text-emerald-500" />
121-
<span className="text-green-800">{row.commits}</span>
122-
</div>
123-
))}
112+
)}
113+
114+
{/* Commit activity */}
115+
{commitActivityByYear && commitActivityByYear.length > 0 && (
116+
<div className="border border-green-900/40 bg-[#030d03] p-4">
117+
<p className="mb-3 text-xs text-green-600">COMMIT_ACTIVITY_BY_YEAR</p>
118+
<div className="space-y-1.5">
119+
{commitActivityByYear.map((row) => (
120+
<div key={row.year} className="flex items-center gap-2 text-xs">
121+
<span className="w-10 shrink-0 text-green-700">{row.year}</span>
122+
<AsciiBar pct={(row.commits / maxCommits) * 100} color="text-emerald-500" />
123+
<span className="w-10 shrink-0 text-right text-green-800">{row.commits}</span>
124+
</div>
125+
))}
126+
</div>
124127
</div>
125-
</div>
126-
)}
127-
128-
{/* Top repos by stars */}
129-
{topReposByStars.length > 0 && (
130-
<div>
131-
<p className="text-xs text-green-600 mb-2">TOP_REPOS_BY_STARS</p>
132-
<div className="space-y-1">
133-
{topReposByStars.map((repo) => (
134-
<div key={repo.name} className="flex items-center gap-2 text-xs">
135-
<span className="w-36 shrink-0 truncate text-green-700">{repo.name}</span>
136-
<AsciiBar pct={(repo.stars / maxStars) * 100} color="text-amber-500" />
137-
<span className="text-green-800">★ {repo.stars}</span>
138-
</div>
139-
))}
128+
)}
129+
130+
{/* Top repos by stars */}
131+
{topReposByStars.length > 0 && (
132+
<div className="border border-green-900/40 bg-[#030d03] p-4">
133+
<p className="mb-3 text-xs text-green-600">TOP_REPOS_BY_STARS</p>
134+
<div className="space-y-1.5">
135+
{topReposByStars.map((repo) => (
136+
<div key={repo.name} className="flex items-center gap-2 text-xs">
137+
<span className="w-24 shrink-0 truncate text-green-700">{repo.name}</span>
138+
<AsciiBar pct={(repo.stars / maxStars) * 100} color="text-amber-500" />
139+
<span className="shrink-0 text-green-800">★{repo.stars}</span>
140+
</div>
141+
))}
142+
</div>
140143
</div>
141-
</div>
142-
)}
144+
)}
145+
</div>
143146

144-
<p className="text-xs text-green-900 select-none">{'─'.repeat(52)}</p>
147+
<p className="text-xs text-green-900/60 select-none">{'─'.repeat(52)}</p>
145148
</div>
146149
</section>
147150
)

0 commit comments

Comments
 (0)