Initial commit

src/components/krow/ActivitySnapshot.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const SNAPSHOTS = [
+  { key: 'krow', label: 'KROW Score', get: (p) => Math.round(p.krow_score || 0) },
+  { key: 'badges', label: 'Other Badges', get: (p) => (p.earned_badges || []).length },
+  { key: 'skills', label: 'Skills', get: (p) => (p.skills || []).length },
+  { key: 'shares', label: 'Shares', get: () => 0 },
+];
+
+export default function ActivitySnapshot({ profile }) {
+  return (
+    <div className="rounded-2xl bg-[#E8EEFE] p-6 border border-[#C7D4F7]">
+      <h3 className="font-serif text-center text-[18px] font-semibold mb-5" style={{ color: '#333F48' }}>
+        Activity snapshot
+      </h3>
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
+        {SNAPSHOTS.map((s) => (
+          <div key={s.key} className="bg-white rounded-2xl shadow-sm p-4 flex flex-col items-center justify-center aspect-square">
+            <span className="text-[34px] font-bold leading-none" style={{ color: '#0A39DF' }}>
+              {s.get(profile)}
+            </span>
+            <span className="text-[12px] text-[#333F48] mt-2 text-center">{s.label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}