kyd-shared-badge 0.1.20 → 0.1.22

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import React from 'react';
-import { IconType } from 'react-icons';
-import { FiAlertTriangle, FiCpu, FiShield, FiThumbsUp } from 'react-icons/fi';
+import { FiAlertTriangle } from 'react-icons/fi';
 import { PublicBadgeData } from './types';
 import ShareButton from './components/ShareButton';
 import ReportHeader from './components/ReportHeader';
@@ -12,17 +11,6 @@ import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
 import Image from 'next/image';
 import { red, yellow, green } from './colors';
 
-// Icon images from this package's public folder (will be bundled as assets)
-import RiskGreen from './public/riskgreen.png';
-import RiskYellow from './public/riskyellow.png';
-import RiskRed from './public/riskred.png';
-import CodeGreen from './public/codegreen.png';
-import CodeYellow from './public/codeyellow.png';
-import CodeRed from './public/codered.png';
-import AiGreen from './public/aigreen.png';
-import AiYellow from './public/aiyellow.png';
-import AiRed from './public/aired.png';
-
 const getScoreColor = (score: number) => {
   if (score >= 80) return green;
   if (score >= 65) return yellow;
@@ -38,27 +26,27 @@ const getRiskText = (risk: number) => {
 
 // Helpers to map thresholds to icon images
 const getTechnicalIconSrc = (score: number): string => {
-  if (score >= 80) return CodeGreen as unknown as string;
-  if (score >= 65) return CodeYellow as unknown as string;
-  return CodeRed as unknown as string;
+  if (score >= 80) return '/badge/codegreen.png';
+  if (score >= 65) return '/badge/codeyellow.png';
+  return '/badge/codered.png';
 };
 
 const getRiskIconSrc = (score: number): string => {
-  if (score >= 80) return RiskGreen as unknown as string;
-  if (score >= 65) return RiskYellow as unknown as string;
-  return RiskRed as unknown as string;
+  if (score >= 80) return '/badge/riskgreen.png';
+  if (score >= 65) return '/badge/riskyellow.png';
+  return '/badge/riskred.png';
 };
 
 const getAiIconSrc = (descriptor?: string): string => {
-  if (!descriptor) return AiYellow as unknown as string;
+  if (!descriptor) return '/badge/aiyellow.png';
   const d = descriptor.toLowerCase();
   if (d.indexOf('low') !== -1 || d.indexOf('transparent') !== -1 || d.indexOf('responsible') !== -1 || d.indexOf('conservative') !== -1) {
-    return AiGreen as unknown as string;
+    return '/badge/aigreen.png';
   }
   if (d.indexOf('medium') !== -1 || d.indexOf('moderate') !== -1 || d.indexOf('balanced') !== -1) {
-    return AiYellow as unknown as string;
+    return '/badge/aiyellow.png';
   }
-  return AiRed as unknown as string;
+  return '/badge/aired.png';
 };
 
 interface ScoreCardProps {
@@ -66,13 +54,12 @@ interface ScoreCardProps {
   score: number;
   description: string;
   descriptor?: string;
-  icon: IconType;
   scoreType: 'number' | 'risk' | 'descriptor';
   isRecruiter?: boolean;
-  iconImageSrc?: string; // optional image-based icon
+  iconImageSrc: string;
 }
 
-const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreType, isRecruiter = false, iconImageSrc }: ScoreCardProps) => {
+const ScoreCard = ({ title, score, description, descriptor, scoreType, isRecruiter = false, iconImageSrc }: ScoreCardProps) => {
     const isDescriptor = scoreType === 'descriptor';
     const scoreHex = isDescriptor ? undefined : getScoreColor(score);
     const scoreClass = isDescriptor ? 'text-neutral-400' : '';
@@ -96,12 +83,7 @@ const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreTyp
           style={isRecruiter ? { backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' } : undefined}
         >
             <div className={`text-3xl mb-4 ${scoreClass}`} style={scoreHex ? { color: scoreHex } : undefined}>
-                {iconImageSrc ? (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <Image src={iconImageSrc} alt="icon" className="h-8 w-8 object-contain" />
-                ) : (
-                  <Icon />
-                )}
+              <Image src={iconImageSrc} alt="icon" width={32} height={32} className="h-8 w-8 object-contain" />
             </div>
             <h3 className={`font-semibold text-xl ${isDescriptor ? 'text-neutral-400' : ''}`} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{title}</h3>
             <p className={`text-4xl font-bold ${scoreClass}`} style={scoreHex ? { color: scoreHex } : undefined}>{displayScore}</p>
@@ -158,26 +140,23 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                   title="KYD Technical™" 
                   score={devTrustScore?.score || 0}
                   description={devTrustScore?.description || ''}
-                  icon={FiThumbsUp}
-                      scoreType='number'
-                      isRecruiter={isRecruiter}
-                      iconImageSrc={getTechnicalIconSrc(devTrustScore?.score || 0)}
+                  scoreType='number'
+                  isRecruiter={isRecruiter}
+                  iconImageSrc={getTechnicalIconSrc(devTrustScore?.score || 0)}
                 />
                 <ScoreCard 
                   title="KYD Risk™" 
                   score={riskScore?.score || 0}
                   description={riskScore?.description || ''}
-                  icon={FiShield}
-                      scoreType='risk'
-                      isRecruiter={isRecruiter}
-                      iconImageSrc={getRiskIconSrc(riskScore?.score || 0)}
+                  scoreType='risk'
+                  isRecruiter={isRecruiter}
+                  iconImageSrc={getRiskIconSrc(riskScore?.score || 0)}
                 />
                 <ScoreCard 
                   title={<span>KYD AI™ <span className="text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full align-middle">Beta</span></span>}
                   score={0}
                   description={aiUsageScore?.description || 'Analysis of AI tool usage and transparency.'}
                   descriptor={aiUsageScore?.descriptor}
-                  icon={FiCpu}
                   scoreType='descriptor'
                   isRecruiter={isRecruiter}
                   iconImageSrc={getAiIconSrc(aiUsageScore?.descriptor)}

package/src/colors.ts

@@ -1,5 +1,5 @@
 const red = '#EC6662'
 const yellow = '#ffbb54'
-const green = '#49a08a'
+const green = '#02a389'
 
 export { red, yellow, green }