feat: add ChampionBadge and ChampionBloodlineBadge components
This commit is contained in:
52
client/src/components/ChampionBadge.jsx
Normal file
52
client/src/components/ChampionBadge.jsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user