53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
/**
|
|
* 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>
|
|
)
|
|
}
|