Initial commit

src/components/krow/talent/EmployerInsights.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Briefcase, Sparkles, Star, Quote } from 'lucide-react';
+import { esatTag, recentJobs, clientEndorsements } from '@/lib/talentInsights';
+
+export default function EmployerInsights({ profile }) {
+  const esat = esatTag(profile);
+  const jobs = recentJobs(profile);
+  const endorsements = clientEndorsements(profile);
+
+  if (jobs.length === 0 && endorsements.length === 0) return null;
+
+  return (
+    <div className="mt-3 pt-3 border-t border-[#F3F4F6] space-y-3">
+      {/* ESAT + Job history header row */}
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider flex items-center gap-1.5">
+          <Briefcase className="w-3 h-3" /> JOB HISTORY · 3 YR
+        </p>
+        <span className="inline-flex items-center gap-1 text-[10px] font-bold text-[#9CA3AF] tracking-wider">
+          <Sparkles className="w-3 h-3" /> ESAT
+          <span className={`ml-1 px-2 py-0.5 rounded-full text-[10px] font-semibold ${esat.cls}`}>{esat.label}</span>
+        </span>
+      </div>
+
+      {jobs.length > 0 && (
+        <div className="space-y-1">
+          {jobs.map((e, i) => (
+            <div key={i} className="flex items-center gap-2 text-[11px]">
+              <Briefcase className="w-3 h-3 text-[#9CA3AF] shrink-0" />
+              <span className="font-medium text-[#111827] truncate">{e.role}</span>
+              <span className="text-[#6B7280] truncate">· {e.company}</span>
+              {e.years != null && <span className="text-[#9CA3AF] shrink-0">· {e.years}yr</span>}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 3 Client endorsements */}
+      {endorsements.length > 0 && (
+        <div>
+          <p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2 flex items-center gap-1.5">
+            <Quote className="w-3 h-3" /> CLIENT ENDORSEMENTS
+          </p>
+          <div className="space-y-1.5">
+            {endorsements.map((en, i) => (
+              <div key={i} className="flex items-center gap-2 bg-[#F9FAFB] rounded-lg px-2.5 py-1.5">
+                <div className="flex-1 min-w-0">
+                  <p className="text-[11px] font-semibold text-[#111827] truncate">{en.company}</p>
+                  <p className="text-[10px] text-[#6B7280] truncate">{en.role}</p>
+                </div>
+                <div className="flex items-center gap-0.5 shrink-0">
+                  {Array.from({ length: 5 }).map((_, s) => (
+                    <Star
+                      key={s}
+                      className={`w-3 h-3 ${s < en.stars ? 'text-[#F59E0B] fill-[#F59E0B]' : 'text-[#E5E7EB]'}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}