feat: add ChampionBadge and ChampionBloodlineBadge components

This commit is contained in:
2026-03-09 22:16:55 -05:00
parent 0573e154b1
commit 3bc6b694f4

View File

@@ -0,0 +1,52 @@
/**
* ChampionBadge — shown on dogs with is_champion = 1
* ChampionBloodlineBadge — shown on dogs whose sire OR dam is a champion
*
* Usage:
* <ChampionBadge />
* <ChampionBloodlineBadge />
*/
export function ChampionBadge({ size = 'sm' }) {
return (
<span
className="badge-champion"
title="AKC / Registry Champion"
style={size === 'lg' ? { fontSize: '0.8rem', padding: '0.3rem 0.7rem' } : {}}
>
{/* Crown SVG inline — no extra dep */}
<svg
width={size === 'lg' ? 14 : 11}
height={size === 'lg' ? 14 : 11}
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path d="M2 15h16v2H2v-2zm0-2 3-7 5 4 5-4 3 7H2z" />
</svg>
CH
</span>
)
}
export function ChampionBloodlineBadge({ size = 'sm' }) {
return (
<span
className="badge-bloodline"
title="Direct descendant of a champion"
style={size === 'lg' ? { fontSize: '0.8rem', padding: '0.3rem 0.7rem' } : {}}
>
{/* Droplet / bloodline SVG */}
<svg
width={size === 'lg' ? 13 : 10}
height={size === 'lg' ? 13 : 10}
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path d="M12 2C8 8 5 12 5 15.5a7 7 0 0 0 14 0C19 12 16 8 12 2z" />
</svg>
BL
</span>
)
}