28 lines
1.1 KiB
JavaScript
28 lines
1.1 KiB
JavaScript
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: '#0838E0' }}>
|
|
{s.get(profile)}
|
|
</span>
|
|
<span className="text-[12px] text-[#333F48] mt-2 text-center">{s.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |