Skip to content

Commit e3bdf73

Browse files
Adebesin-Cellclaude
andcommitted
fix: handle empty state in compare OG image
Show descriptive text when no packages are selected, matching the Default template's badge style. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 75f2bf5 commit e3bdf73

File tree

1 file changed

+21
-1
lines changed

1 file changed

+21
-1
lines changed

app/components/OgImage/Compare.vue

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,28 @@ function barPct(downloads: number): string {
122122
</h1>
123123
</div>
124124

125+
<!-- Empty state -->
126+
<div
127+
v-if="stats.length === 0"
128+
class="flex flex-wrap items-center gap-x-3 text-4xl text-[#a3a3a3]"
129+
style="font-family: 'Geist', sans-serif"
130+
>
131+
<span>compare npm packages</span>
132+
<span
133+
class="px-3 py-1 rounded-lg border font-normal"
134+
:style="{
135+
color: primaryColor,
136+
backgroundColor: primaryColor + '10',
137+
borderColor: primaryColor + '30',
138+
boxShadow: `0 0 20px ${primaryColor}25`,
139+
}"
140+
>
141+
side-by-side
142+
</span>
143+
</div>
144+
125145
<!-- Bar chart rows -->
126-
<div class="flex flex-col gap-2">
146+
<div v-else class="flex flex-col gap-2">
127147
<div v-for="pkg in stats" :key="pkg.name" class="flex flex-col gap-1">
128148
<!-- Label row: name + downloads + version -->
129149
<div class="flex items-center gap-3" style="font-family: 'Geist', sans-serif">

0 commit comments

Comments
 (0)