kyd-shared-badge 0.2.0 → 0.2.2

package/package.json

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

package/src/components/IpRiskAnalysisDisplay.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { FiInfo } from 'react-icons/fi';
-import { IpRiskAnalysis, IpRiskAnalysisFinding } from '../types';
+import { IpRiskAnalysis, IpRiskAnalysisFinding, IpRiskSections, IpRiskSection } from '../types';
 
 interface IpRiskAnalysisDisplayProps {
     ipRiskAnalysis?: IpRiskAnalysis;
@@ -19,6 +19,19 @@ const FindingRow = ({ finding }: { finding: IpRiskAnalysisFinding }) => (
     </div>
 );
 
+const Section = ({ section }: { section: IpRiskSection }) => (
+  <div className="py-3">
+    <h4 className="text-lg font-semibold mb-2 text-neutral-900 dark:text-white">{section.title}</h4>
+    <div className="space-y-3">
+      {section.items.map((item, idx) => (
+        <div key={idx} className="">
+          <p className="font-medium text-neutral-800 dark:text-neutral-200">{item.label}:</p>
+          <p className="text-sm text-neutral-700 dark:text-neutral-300">{item.text}</p>
+        </div>
+      ))}
+    </div>
+  </div>
+);
 
 const IpRiskAnalysisDisplay = ({ ipRiskAnalysis }: IpRiskAnalysisDisplayProps) => {
     if (!ipRiskAnalysis || !ipRiskAnalysis.checked || !ipRiskAnalysis.findings || ipRiskAnalysis.findings.length === 0) {
@@ -30,7 +43,17 @@ const IpRiskAnalysisDisplay = ({ ipRiskAnalysis }: IpRiskAnalysisDisplayProps) =
         );
     }
 
-    const { findings = [] } = ipRiskAnalysis;
+    const { findings = [], sections } = ipRiskAnalysis as IpRiskAnalysis & { sections?: IpRiskSections };
+
+    if (sections) {
+      return (
+        <div className="mt-6 divide-y divide-neutral-200 dark:divide-neutral-700">
+          <Section section={sections.general} />
+          <Section section={sections.location} />
+          <Section section={sections.reputational} />
+        </div>
+      );
+    }
 
     return (
         <div className="mt-6">

package/src/components/ReportHeader.tsx

@@ -39,8 +39,8 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic,
           style={isRecruiter ? { backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' } : undefined}
         >
             {/* Left Section */}
-            <div className="flex items-center text-left md:text-center">
-                <Image src={finalBadgeImageUrl} alt="KYD Badge" width={150} height={150} unoptimized />
+            <div className="flex items-center text-left md:text-center gap-5">
+                <Image src={finalBadgeImageUrl} alt="KYD Badge" width={100} height={100} unoptimized />
                 <div className='flex flex-col'>
                     <h1 className={isRecruiter ? 'font-bold text-lg' : 'font-bold text-lg text-neutral-900 dark:text-white'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>
                       KYD Self-Check™

package/src/types.ts

@@ -92,6 +92,24 @@ export interface IpRiskAnalysisFinding {
     implication: string;
 }
 
+export type IpRiskPhase = 'NO_MATCH' | 'POSSIBLE_MATCH' | 'POSITIVE_MATCH';
+
+export interface IpRiskSectionItem {
+  label: string;
+  text: string;
+}
+
+export interface IpRiskSection {
+  title: string;
+  items: IpRiskSectionItem[];
+}
+
+export interface IpRiskSections {
+  general: IpRiskSection;
+  location: IpRiskSection;
+  reputational: IpRiskSection;
+}
+
 export interface IpRiskAnalysis {
     checked: boolean;
     findings: IpRiskAnalysisFinding[];
@@ -103,6 +121,9 @@ export interface IpRiskAnalysis {
         impossible_travel_events?: string[];
         anomalous_geo_logins?: string[];
     };
+    phase?: IpRiskPhase;
+    sections?: IpRiskSections;
+    countries?: string[];
 }
 
 export interface AssessmentResult {