kyd-shared-badge 0.3.48 → 0.3.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.48",
+  "version": "0.3.50",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -14,7 +14,9 @@ import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } f
 import { SiCredly, SiFiverr } from 'react-icons/si';
 import GaugeCard from './components/GaugeCard';
 import RiskCard from './components/RiskCard';
-import Image from 'next/image';
+import AiIcon from './components/icons/ai';
+import CodeIcon from './components/icons/code';
+import RiskIcon from './components/icons/risk';
 
 import { yellow, green } from './colors';
 import Skills from './components/Skills';
@@ -163,11 +165,13 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
       <div className={`${wrapperMaxWidth} mx-auto px-2 sm:px-0 overflow-x-auto`}>
         <div className="flex gap-1 sm:gap-2">
           {tabs.map(t => {
-            // Determine if this tab should have an icon
-            let iconSrc: string | null = null;
-            if (t.key === 'ai') iconSrc = '/badge/ai.svg';
-            if (t.key === 'technical') iconSrc = '/badge/code.svg';
-            if (t.key === 'risk') iconSrc = '/badge/risk.svg';
+            // Map tab key to icon component
+            const IconComp = (() => {
+              if (t.key === 'ai') return AiIcon;
+              if (t.key === 'technical') return CodeIcon;
+              if (t.key === 'risk') return RiskIcon;
+              return null;
+            })();
             return (
               <button
                 key={t.key}
@@ -175,7 +179,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                   setActiveTab(t.key);
                   try { if (typeof window !== 'undefined') window.history.replaceState(null, '', `#${t.key}`); } catch {}
                 }}
-                className={`px-3 sm:px-4 py-2 text-sm rounded-t flex items-center gap-2 ${activeTab === t.key ? 'font-semibold' : ''}`}
+                className={`px-3 sm:px-4 py-2 text-sm rounded-t flex items-center gap-2 cursor-pointer ${activeTab === t.key ? 'font-semibold' : ''}`}
                 style={{
                   color: 'var(--text-main)',
                   background: activeTab === t.key ? 'var(--content-card-background)' : 'transparent',
@@ -183,16 +187,14 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                   borderBottomColor: 'transparent'
                 }}
               >
-                {iconSrc && (
-                  <Image
-                    src={iconSrc}
-                    alt=""
+                {IconComp ? (
+                  <IconComp
                     width={18}
                     height={18}
                     className="text-[var(--text-main)]"
                     style={{ display: 'inline-block', verticalAlign: 'middle', color: 'var(--text-main)' }}
                   />
-                )}
+                ) : null}
                 {t.label}
               </button>
             );

package/src/components/CategoryBars.tsx

@@ -95,17 +95,18 @@ const CategoryBars: React.FC<CategoryBarsProps> = ({
                   aria-label={`Jump to ${category} in Appendix`}
                 >
                   {/* signed fill originating from center */}
-                  <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: isNegative ? `var(--status-negative, ${red})` : `var(--status-positive, ${green})` }} />
-                  {/* role target overlay: positive side only, dashed outline */}
+                  <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: isNegative ? `var(--status-negative, ${red})` : `var(--status-positive, ${green})`, zIndex: 1 }} />
+                  {/* role target overlay: positive side only, dashed outline (always above fill) */}
                   {hasTarget && (
                     <div
                       className="absolute top-0 h-full"
                       style={{
                         left: '50%',
                         width: `${targetWidth}%`,
-                        borderTop: '2px dashed var(--icon-accent)',
-                        borderBottom: '2px dashed var(--icon-accent)',
-                        opacity: 0.7,
+                        borderTop: '2px dashed #000',
+                        borderBottom: '2px dashed #000',
+                        opacity: 1,
+                        zIndex: 2,
                       }}
                       aria-hidden="true"
                     />

package/src/components/icons/ai.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="512pt"
+    height="512pt"
+    viewBox="0 0 512 512"
+    fill="currentColor"
+    stroke="currentColor"
+    {...props}
+  >
+    <path d="m413.15 256c11.828-10.562 22.391-21.121 31.684-31.262 33.797-38.02 45.625-70.125 33.797-91.246-6.7578-12.25-21.121-19.012-40.977-21.543-3.3789-15.629-17.742-27.457-34.641-27.457-19.012 0-34.641 15.207-35.484 34.219-9.7148 2.1133-19.434 5.0703-29.992 8.4492-15.207-71.816-42.668-119.13-74.773-119.13-32.531-0.003906-59.988 46.887-75.199 119.12-70.125-22.391-124.62-21.969-140.67 6.3359-11.828 21.121 0 53.227 33.797 91.246 9.293 10.562 19.855 21.121 31.684 31.262-11.828 10.562-22.391 21.121-31.684 31.262-33.797 38.02-45.625 70.125-33.797 91.246 5.9141 10.562 17.32 16.898 32.527 20.277 2.5352 16.898 17.32 29.992 35.062 29.992 19.012 0 34.641-15.207 35.484-33.797 11.828-2.5352 24.5-5.9141 37.598-10.137 15.207 72.238 42.668 119.55 75.195 119.55 32.105 0 59.988-47.312 74.773-119.55 32.527 10.562 62.098 16.055 85.754 16.055 27.035 0 46.469-7.1797 54.918-21.969 11.828-21.121 0-53.227-33.797-91.246-8.8672-10.562-19.43-21.121-31.258-31.684zm-10.137-163.06c11.828 0 21.543 7.6055 25.348 18.164 0.84375 2.5352 1.2656 5.4922 1.2656 8.4492v0.42188c0 14.363-12.25 26.191-26.613 26.191-12.672 0-23.234-8.8711-25.77-20.699-0.42188-2.1133-0.84375-3.8008-0.84375-5.9141v-2.957c1.6875-13.094 12.672-23.656 26.613-23.656zm-34.641 35.062c3.8008 15.629 17.742 27.457 34.641 27.457 19.434 0 35.062-15.207 35.484-34.219 15.629 2.1133 27.035 7.6055 32.527 16.898 9.7148 17.32-2.1133 46.891-32.527 81.109-9.293 10.562-19.855 21.121-31.684 31.262-7.1797-5.9141-14.363-11.828-21.969-18.164-11.406-8.8711-23.656-17.32-36.328-25.77-1.6914-24.926-4.6484-48.582-8.8711-70.125 9.7148-3.8008 19.43-6.3359 28.727-8.4492zm-37.598 245.02c-18.586-6.3359-38.02-14.363-57.875-23.656 10.984-5.4922 21.969-11.406 32.949-17.742 11.406-6.3359 22.391-13.098 32.949-19.855-1.6875 21.547-4.6445 42.246-8.0234 61.254zm-29.57-49.004c-13.098 7.6055-25.77 14.363-38.863 20.277-12.672-6.3359-25.77-13.098-38.863-20.277-13.098-7.6055-25.77-15.207-38.02-23.234-0.84375-14.785-1.2656-29.57-1.2656-44.777s0.42188-30.414 1.2656-44.777c12.25-8.0273 24.926-16.055 38.02-23.234 13.098-7.6055 25.77-14.363 38.863-20.277 12.672 6.3359 25.77 13.098 38.863 20.277 13.098 7.6055 25.77 15.207 38.02 23.234 0.84375 14.785 1.6914 29.57 1.6914 44.777s-0.42187 29.992-1.6914 44.777c-11.828 8.0273-24.504 16.055-38.02 23.234zm-114.91-12.25c10.562 6.7578 21.543 13.52 32.949 19.855 10.984 6.3359 21.969 12.25 32.949 17.742-19.855 9.293-39.289 17.32-57.875 23.656-3.375-19.008-5.9102-39.707-8.0234-61.254zm-9.7148-17.32c-18.586-12.672-35.484-25.348-51.117-38.441 15.207-13.098 32.527-26.191 51.117-38.441-0.84375 12.672-0.84375 25.348-0.84375 38.863-0.003906 13.52-0.003906 25.77 0.84375 38.02zm18.164-155.46c18.586 6.3359 38.02 14.363 57.875 23.656-10.984 5.4922-21.969 11.406-32.949 17.742-11.406 6.3359-22.391 13.098-32.949 19.855 1.6875-21.547 4.2227-42.246 8.0234-61.254zm144.05 61.254c-10.562-6.7578-21.543-13.52-32.949-19.855-10.984-6.3359-21.969-12.25-32.949-17.742 19.855-9.293 39.289-17.32 57.875-23.656 3.3789 19.008 6.3359 39.707 8.0234 61.254zm10.141 17.32c18.586 12.672 35.484 25.348 50.691 38.441-15.207 13.098-32.527 26.191-50.691 38.441 0.42188-12.672 0.84375-25.348 0.84375-38.441 0-13.098-0.42188-26.191-0.84375-38.441zm-86.18-201.08c27.457 0 52.383 46.047 66.324 113.21-21.121 7.1797-43.512 16.477-66.324 27.457-22.812-10.984-45.203-20.277-66.324-27.457 13.941-67.172 38.867-113.21 66.324-113.21zm-175.73 202.35c-30.414-34.219-42.246-63.789-32.527-81.109 6.7578-11.828 23.234-17.742 46.469-17.742 22.812 0 52.383 5.4922 84.91 16.055-4.2227 21.543-7.1797 45.203-8.8711 70.125-21.121 14.363-40.977 29.148-58.297 43.934-11.828-10.562-22.391-21.121-31.684-31.262zm27.457 201.08c-12.25 0-22.812-8.4492-25.77-19.855-0.42188-2.1133-0.84375-4.2227-0.84375-6.7578v-2.1133c1.2656-13.52 12.672-24.5 26.613-24.5 12.672 0 23.234 8.8711 25.77 21.121 0.42188 1.6914 0.42188 3.8008 0.42188 5.4922v3.3789c-1.2656 13.098-12.672 23.234-26.191 23.234zm34.641-33.793c-3.3789-16.055-17.742-27.883-34.641-27.883-18.164 0-33.371 13.941-35.062 31.684-11.828-2.5352-20.277-7.6055-24.926-15.629-9.7148-17.32 2.1133-46.891 32.527-81.109 9.293-10.562 19.855-21.121 31.684-31.262 17.32 14.785 37.176 29.57 58.297 43.934 1.6914 24.926 4.6484 48.582 8.8711 70.125-12.668 4.2266-24.922 7.6055-36.75 10.141zm113.64 109.41c-27.457 0-52.383-46.047-66.324-113.21 21.121-7.1797 43.512-16.477 66.324-27.457 22.812 10.984 45.203 20.277 66.324 27.457-14.363 67.172-38.863 113.21-66.324 113.21zm207.84-121.24c-13.52 24.078-65.902 22.812-131.38 1.6914 4.2227-21.543 7.1797-45.203 8.8711-70.125 21.121-13.941 40.977-28.727 58.297-43.934 11.828 10.562 22.391 21.121 31.684 31.262 30.414 34.215 42.242 63.785 32.527 81.105z"/>
+  </svg>
+)
+export default SvgComponent

package/src/components/icons/code.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="512pt"
+    height="512pt"
+    fill="currentColor"
+    stroke="currentColor"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M301.62 78.742a7.533 7.533 0 0 0-6.879 5.578l-91.039 339.52a7.525 7.525 0 0 0 5.281 9.16 7.53 7.53 0 0 0 9.22-5.28l91.101-339.5c.52-1.942.238-4-.762-5.72-1-1.738-2.64-3-4.578-3.52a7.636 7.636 0 0 0-2.34-.237zM163.7 114.363c-2.02-.04-3.96.7-5.398 2.078l-140.88 134.1v.02a7.538 7.538 0 0 0-2.36 5.46c0 2.079.86 4.06 2.36 5.481l140.88 134.06a7.58 7.58 0 0 0 5.379 2.102c2-.04 3.921-.899 5.3-2.34a7.519 7.519 0 0 0 2.059-5.399c-.04-2-.899-3.878-2.34-5.261L33.54 256.004l135.16-128.6v-.02a7.459 7.459 0 0 0 2.34-5.261 7.53 7.53 0 0 0-2.059-5.399 7.56 7.56 0 0 0-5.28-2.36zm184.62 0h-.02c-2 .059-3.898.898-5.28 2.36a7.519 7.519 0 0 0-2.06 5.398c.04 2 .9 3.898 2.34 5.261l135.16 128.6-135.16 128.66v.02a7.56 7.56 0 0 0-2.359 5.281c-.039 2 .7 3.942 2.078 5.399a7.6 7.6 0 0 0 5.301 2.32c2 .039 3.941-.719 5.379-2.102l140.88-134.06a7.549 7.549 0 0 0 2.36-5.48c0-2.059-.86-4.04-2.36-5.461l-140.88-134.1c-1.442-1.398-3.379-2.14-5.399-2.102z" />
+  </svg>
+)
+export default SvgComponent

package/src/components/icons/risk.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { SVGProps } from "react"
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="512pt"
+    height="512pt"
+    fill="currentColor"
+    stroke="currentColor"
+    viewBox="0 0 512 512"
+    {...props}
+  >
+    <path d="M499.2 374c0-64.961-25.301-126.04-71.238-171.96-45.941-45.941-107-71.238-171.96-71.238-64.961 0-126.04 25.301-171.96 71.238-45.922 45.922-71.219 106.98-71.238 171.92v.04c0 3.98 3.219 7.179 7.18 7.179h472.02c3.96 0 7.18-3.219 7.18-7.18h.019zm-405-161.8a239.59 239.59 0 0 1 9.281-8.781l12.68 15.102c1.422 1.699 3.461 2.558 5.52 2.558 1.64 0 3.28-.558 4.62-1.68 3.04-2.558 3.442-7.077.88-10.12l-12.7-15.121c17.302-13.68 36.32-24.66 56.5-32.72l6.782 18.642a7.193 7.193 0 0 0 6.762 4.738c.82 0 1.64-.14 2.46-.441a7.187 7.187 0 0 0 4.301-9.22l-6.78-18.64c20.558-6.739 42.16-10.54 64.315-11.22v19.72c0 3.98 3.219 7.18 7.18 7.18 3.96 0 7.18-3.22 7.18-7.18v-19.72c22.14.68 43.762 4.481 64.316 11.22l-6.782 18.64a7.183 7.183 0 0 0 4.301 9.22c.82.3 1.64.441 2.461.441 2.941 0 5.7-1.82 6.762-4.738l6.78-18.641a227.062 227.062 0 0 1 56.5 32.719l-12.698 15.12c-2.559 3.04-2.16 7.583.879 10.122 1.34 1.14 2.98 1.68 4.62 1.68a7.25 7.25 0 0 0 5.52-2.56l12.68-15.101c3.16 2.84 6.262 5.761 9.282 8.781a231.058 231.058 0 0 1 32.738 41.18l-17.141 9.898c-3.442 1.98-4.621 6.38-2.641 9.82A7.206 7.206 0 0 0 437 276.7c1.219 0 2.461-.32 3.578-.96l17.18-9.923c10.36 19.238 17.84 39.88 22.301 61.38l-19.48 3.44c-3.898.68-6.52 4.423-5.84 8.321a7.198 7.198 0 0 0 7.079 5.942c.422 0 .84-.04 1.261-.122l19.461-3.44a228.034 228.034 0 0 1 2.18 25.46l-130.88.02c-2.102-29.238-17.02-55.742-41-72.781l21.078-62.281a7.19 7.19 0 0 0-3.219-8.54 7.181 7.181 0 0 0-9 1.481l-46.62 53.078a98.428 98.428 0 0 0-19.083-1.879c-51.68 0-94.14 40.16-97.84 90.922H27.296c.262-8.582 1-17.078 2.18-25.46l19.46 3.44a6.9 6.9 0 0 0 1.263.122c3.422 0 6.46-2.461 7.078-5.942.68-3.898-1.922-7.64-5.84-8.32l-19.48-3.442c4.441-21.5 11.94-42.14 22.3-61.379l17.18 9.922c1.142.66 2.36.961 3.579.961a7.197 7.197 0 0 0 6.242-3.601c1.98-3.442.801-7.84-2.64-9.82L61.477 253.4c9.18-14.781 20.12-28.602 32.719-41.199zm188.68 125.46-21.738 6.059-5.621-21.86L283 290.58l.101-.102 25.68-29.238zm-40.68-22.422c-1.559 1.781-2.16 4.238-1.559 6.54l8.399 32.64a7.25 7.25 0 0 0 3.36 4.441c1.1.641 2.339.961 3.6.961.641 0 1.302-.078 1.923-.261l32.48-9.04a7.146 7.146 0 0 0 4.879-4.62l12.699-37.5c18.16 14.34 29.48 35.34 31.44 58.44l-166.84-.019c3.66-42.82 39.66-76.539 83.423-76.539 2.601 0 5.199.121 7.8.36z" />
+  </svg>
+)
+export default SvgComponent