fix(profile): render badge preview as responsive image

Made-with: Cursor

Author: dotsystemsdevs

src/components/ReadmeBadge.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { copyText, promptCopy } from '@/lib/clipboard'
 
 const MONO = `var(--font-courier), system-ui, sans-serif`
@@ -11,8 +11,6 @@ interface Props {
 
 export default function ReadmeBadge({ username }: Props) {
   const [copied, setCopied] = useState(false)
-  const [svg, setSvg] = useState<string | null>(null)
-  const [svgError, setSvgError] = useState(false)
 
   // Version param forces GitHub's camo proxy to refetch when we redesign the badge.
   const BADGE_VERSION = '3'
@@ -21,24 +19,6 @@ export default function ReadmeBadge({ username }: Props) {
   const altText    = `Commitment Issues — @${username}'s graveyard`
   const markdown   = `[![${altText}](${badgeUrl})](${profileUrl})`
 
-  useEffect(() => {
-    let cancelled = false
-    setSvg(null)
-    setSvgError(false)
-    fetch(`/api/badge?username=${encodeURIComponent(username)}&v=${BADGE_VERSION}&frame=0`)
-      .then(r => {
-        if (!r.ok) throw new Error('badge fetch failed')
-        return r.text()
-      })
-      .then(text => {
-        if (!cancelled) setSvg(text)
-      })
-      .catch(() => {
-        if (!cancelled) setSvgError(true)
-      })
-    return () => { cancelled = true }
-  }, [username, BADGE_VERSION])
-
   async function handleCopy() {
     const ok = await copyText(markdown)
     if (!ok) promptCopy(markdown, 'Copy this README badge markdown')
@@ -49,44 +29,15 @@ export default function ReadmeBadge({ username }: Props) {
   return (
     <div className="readme-badge-block readme-badge-block--profile record-card" style={{ width: '100%', marginBottom: '22px', border: '2px solid #1a1a1a' }}>
       {/* Badge preview — the SVG already has its own border; keep the wrapper borderless */}
-      <div className="readme-badge-preview" style={{ width: '100%', aspectRatio: '440 / 96', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        {svg ? (
-          <div
-            aria-label={altText}
-            role="img"
-            style={{ width: '100%', height: '100%', display: 'block' }}
-            // SVG is generated by our own API route.
-            dangerouslySetInnerHTML={{ __html: svg }}
-          />
-        ) : (
-          <div
-            aria-label={altText}
-            role="img"
-            style={{
-              width: '100%',
-              height: '100%',
-              background: 'transparent',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '10px',
-              textAlign: 'center',
-            }}
-          >
-            <span
-              style={{
-                fontFamily: MONO,
-                fontSize: '11px',
-                fontWeight: 700,
-                letterSpacing: '0.12em',
-                textTransform: 'uppercase',
-                color: svgError ? '#8B0000' : 'var(--c-muted)',
-              }}
-            >
-              {svgError ? 'could not load graveyard badge' : 'loading graveyard badge…'}
-            </span>
-          </div>
-        )}
+      <div className="readme-badge-preview" style={{ width: '100%', aspectRatio: '440 / 96' }}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={`/api/badge?username=${encodeURIComponent(username)}&v=${BADGE_VERSION}&frame=0`}
+          alt={altText}
+          loading="lazy"
+          decoding="async"
+          style={{ width: '100%', height: '100%', display: 'block' }}
+        />
       </div>
 
       {/* Copy row */}