kyd-shared-badge 0.1.21 → 0.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.1.21",
+  "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 {
@@ -95,7 +83,7 @@ const ScoreCard = ({ title, score, description, descriptor, scoreType, isRecruit
           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}>
-              <Image src={iconImageSrc} alt="icon" className="h-8 w-8 object-contain" />
+              <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>