// ───────────────────────────────────────────────────────────── // GITWRAP — card + overlay components // ───────────────────────────────────────────────────────────── const CARD_W = 600, CARD_H = 315, PAD = 28; const OVERLAY_W = 405, OVERLAY_H = 720; // --- sparkline (shared) ------------------------------------------ function Sparkline({ series, active, delay, accent, width, height = 44, filled = true }) { const pathRef = useRef(null); const [len, setLen] = useState(0); const [drawn, setDrawn] = useState(false); const W = width; const H = height; const pts = series.map((v, i) => { const x = series.length === 1 ? W / 2 : (i / (series.length - 1)) * W; const y = H - 4 - v * (H - 10); return [x, y]; }); const d = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' '); const area = `M0,${H} L` + pts.map((p) => `${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' L') + ` L${W},${H} Z`; useLayoutEffect(() => { if (pathRef.current) setLen(pathRef.current.getTotalLength()); }, [d]); useEffect(() => { if (active && len) { const t = setTimeout(() => setDrawn(true), delay); return () => clearTimeout(t); } setDrawn(false); }, [active, len, delay]); return ( {filled && ( )} {pts.map((p, i) => ( ))} ); } // ───────────────────────────────────────────────────────────── // CARD FORMAT (landscape 600×315, dark bg with photo overlay) // ───────────────────────────────────────────────────────────── function StatTile({ tile, active, delay, big }) { const value = useCountUp(tile.value, active, { delay: delay + 140 }); return (
{tile.label}
{fmt(value)}
); } function ShimmerTiles() { return (
{[0, 1, 2].map((i) => (
))}
); } function Card({ stats, phase, patUnlocked, error, exportRef }) { const active = phase === 'reveal'; const accent = 'var(--green)'; const tiles = stats ? [...stats.tiles] : []; if (patUnlocked && stats) tiles.push({ key: 'loc', label: 'Lines of Code', value: stats.loc }); const tileBase = 200, tileStep = 80; const sparkDelay = tileBase + tiles.length * tileStep + 100; const footerDelay = sparkDelay + 900; const avatarUrl = stats?.avatar || ''; return (
{avatarUrl && ( )}
{phase === 'error' ? (
×
{error?.title || 'user not found'}
{error?.sub || 'check the username and try again'}
) : (
{avatarUrl && }
{stats?.name || stats?.username}
● {stats?.topLang} · most active language
{stats?.range.label}
{phase === 'loading' ? : (
{tiles.map((t, i) => ( 3} delay={tileBase + i * tileStep} /> ))}
)}
{phase === 'loading' ? (
) : ( )}
github.com/{stats?.username} {stats?.range.axis} · gitwrap
)}
); } // ───────────────────────────────────────────────────────────── // OVERLAY FORMAT (portrait 405×720, transparent bg) // Designed to be layered over any photo in IG/TikTok/etc. // ───────────────────────────────────────────────────────────── function OverlayCard({ stats, patUnlocked, exportRef }) { const [mounted, setMounted] = useState(false); useEffect(() => { const t = setTimeout(() => setMounted(true), 60); return () => clearTimeout(t); }, []); const active = mounted; const accent = '#3fb950'; const tiles = stats ? [...stats.tiles] : []; if (patUnlocked && stats) tiles.push({ key: 'loc', label: 'Lines of Code', value: stats.loc }); const tileBase = 80, tileStep = 90; const sparkDelay = tileBase + tiles.length * tileStep + 60; const footerDelay = sparkDelay + 900; const OW = OVERLAY_W - 48; // inner width return (
{/* stat rows */}
{tiles.map((t, i) => ( ))}
{/* sparkline */}
{/* GitHub logo + range */}
GitHub
{stats?.range.sub} · gitwrap
); } function OverlayStatRow({ tile, active, delay }) { const value = useCountUp(tile.value, active, { delay: delay + 100 }); return (
{tile.label}
{fmt(value)}
); } Object.assign(window, { Card, OverlayCard, Sparkline, StatTile, CARD_W, CARD_H, OVERLAY_W, OVERLAY_H });