From 3bc6b694f4672c5b3e2c55ee5d7c85f889fb9258 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Mon, 9 Mar 2026 22:16:55 -0500
Subject: [PATCH] feat: add ChampionBadge and ChampionBloodlineBadge components

---
 client/src/components/ChampionBadge.jsx | 52 +++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 client/src/components/ChampionBadge.jsx

diff --git a/client/src/components/ChampionBadge.jsx b/client/src/components/ChampionBadge.jsx
new file mode 100644
index 0000000..81a43c0
--- /dev/null
+++ b/client/src/components/ChampionBadge.jsx
@@ -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>
+  )
+}