diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx index 4499620..60cea4b 100644 --- a/src/components/DashboardLayout.tsx +++ b/src/components/DashboardLayout.tsx @@ -4,6 +4,7 @@ import { TopBar } from './TopBar' import Sidebar from './Sidebar' import { PatientSummaryTile } from './tiles/PatientSummaryTile' import { LatestResultsTile } from './tiles/LatestResultsTile' +import { CoreSkillsTile } from './tiles/CoreSkillsTile' const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches @@ -101,6 +102,7 @@ export function DashboardLayout() { {/* LatestResultsTile — half width (left) */} {/* CoreSkillsTile — half width (right) */} + {/* LastConsultationTile — full width */} {/* CareerActivityTile — full width */} {/* EducationTile — full width */} diff --git a/src/components/tiles/CoreSkillsTile.tsx b/src/components/tiles/CoreSkillsTile.tsx new file mode 100644 index 0000000..933848e --- /dev/null +++ b/src/components/tiles/CoreSkillsTile.tsx @@ -0,0 +1,96 @@ +import { BarChart3, Code2, Database, PieChart, FileCode2 } from 'lucide-react' +import { Card, CardHeader } from '../Card' +import { skills } from '@/data/skills' + +const iconMap = { + BarChart3, + Code2, + Database, + PieChart, + FileCode2, +} + +export function CoreSkillsTile() { + return ( + + +
+ {skills.map((skill) => { + const IconComponent = iconMap[skill.icon as keyof typeof iconMap] + + return ( +
+ {/* Icon container */} +
+ {IconComponent && } +
+ + {/* Text block */} +
+
+ {skill.name} +
+
+ {skill.frequency} · Since {skill.startYear} · {skill.yearsOfExperience} yrs +
+
+ + {/* Status badge */} +
+ {skill.status} +
+
+ ) + })} +
+
+ ) +}