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