US-016: Modify PatientSummaryTile: structured presentation with highlight strip
Add visual highlight strip showing key stats (9+ Years, 1.2M Population, £220M Budget, £14.6M+ Savings) above the profile text. Stats displayed as teal-colored badges with labels for improved visual hierarchy and scanability. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,45 @@ import { Card, CardHeader } from '../Card'
|
||||
import { personalStatement } from '@/data/profile'
|
||||
|
||||
export function PatientSummaryTile() {
|
||||
const bodyStyles: React.CSSProperties = {
|
||||
// Key statistics from CV_v4.md
|
||||
const highlights = [
|
||||
{ label: '9+ Years', sublabel: 'Professional Experience' },
|
||||
{ label: '1.2M', sublabel: 'Population Served' },
|
||||
{ label: '£220M', sublabel: 'Budget Managed' },
|
||||
{ label: '£14.6M+', sublabel: 'Savings Identified' },
|
||||
]
|
||||
|
||||
const highlightStripStyles: React.CSSProperties = {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
|
||||
gap: '12px',
|
||||
marginBottom: '20px',
|
||||
paddingBottom: '20px',
|
||||
borderBottom: '1px solid var(--border-light)',
|
||||
}
|
||||
|
||||
const highlightItemStyles: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2px',
|
||||
}
|
||||
|
||||
const highlightValueStyles: React.CSSProperties = {
|
||||
fontSize: '18px',
|
||||
fontWeight: 700,
|
||||
color: 'var(--accent)',
|
||||
fontFamily: 'var(--font-ui)',
|
||||
}
|
||||
|
||||
const highlightLabelStyles: React.CSSProperties = {
|
||||
fontSize: '11px',
|
||||
fontWeight: 500,
|
||||
color: 'var(--text-secondary)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.02em',
|
||||
}
|
||||
|
||||
const profileTextStyles: React.CSSProperties = {
|
||||
fontSize: '13px',
|
||||
lineHeight: '1.6',
|
||||
color: 'var(--text-primary)',
|
||||
@@ -12,7 +50,19 @@ export function PatientSummaryTile() {
|
||||
return (
|
||||
<Card full tileId="patient-summary">
|
||||
<CardHeader dotColor="teal" title="PATIENT SUMMARY" />
|
||||
<div style={bodyStyles}>{personalStatement}</div>
|
||||
|
||||
{/* Highlight strip with key stats */}
|
||||
<div style={highlightStripStyles}>
|
||||
{highlights.map((highlight, idx) => (
|
||||
<div key={idx} style={highlightItemStyles}>
|
||||
<div style={highlightValueStyles}>{highlight.label}</div>
|
||||
<div style={highlightLabelStyles}>{highlight.sublabel}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Profile text with improved readability */}
|
||||
<div style={profileTextStyles}>{personalStatement}</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user