admin
cf5399a767
Implements core detail panel infrastructure for slide-in content panels: - DetailPanelContext: Manages panel state (content, open/close, isOpen) - DetailPanel: Slide-in panel component with backdrop, header, and scrollable body - useFocusTrap: Keyboard focus trap hook for modal accessibility - Width mapping: narrow (400px) for kpi/skill/education, wide (60vw) for consultation/project/career-role - Title mapping derives from content data (kpi.label, skill.name, etc.) - Close triggers: backdrop click, Escape key, X button - ARIA: aria-modal, role=dialog, aria-labelledby - Mobile responsive: both widths become 100vw on <768px - prefers-reduced-motion: instant appear, no animations - Placeholder content (real renderers in later stories) - Export CardHeaderProps interface from Card.tsx - Add responsive panel width CSS rules Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode
|
|
full?: boolean // spans both grid columns
|
|
className?: string
|
|
tileId?: string // data-tile-id for command palette scroll targeting
|
|
}
|
|
|
|
export function Card({ children, full, className, tileId }: CardProps) {
|
|
const [isHovered, setIsHovered] = React.useState(false)
|
|
|
|
const baseStyles: React.CSSProperties = {
|
|
background: 'var(--surface)',
|
|
border: isHovered
|
|
? '1px solid var(--border)'
|
|
: '1px solid var(--border-light)',
|
|
borderRadius: 'var(--radius)',
|
|
padding: '20px',
|
|
boxShadow: isHovered ? 'var(--shadow-md)' : 'var(--shadow-sm)',
|
|
transition: 'box-shadow 0.2s, border-color 0.2s',
|
|
gridColumn: full ? '1 / -1' : undefined,
|
|
}
|
|
|
|
return (
|
|
<article
|
|
style={baseStyles}
|
|
className={className}
|
|
data-tile-id={tileId}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
{children}
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export interface CardHeaderProps {
|
|
dotColor: 'teal' | 'amber' | 'green' | 'alert' | 'purple'
|
|
title: string
|
|
rightText?: string
|
|
}
|
|
|
|
const dotColorMap: Record<CardHeaderProps['dotColor'], string> = {
|
|
teal: '#0D6E6E',
|
|
amber: '#D97706',
|
|
green: '#059669',
|
|
alert: '#DC2626',
|
|
purple: '#7C3AED',
|
|
}
|
|
|
|
export function CardHeader({ dotColor, title, rightText }: CardHeaderProps) {
|
|
const headerStyles: React.CSSProperties = {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
marginBottom: '16px',
|
|
}
|
|
|
|
const dotStyles: React.CSSProperties = {
|
|
width: '8px',
|
|
height: '8px',
|
|
borderRadius: '50%',
|
|
backgroundColor: dotColorMap[dotColor],
|
|
flexShrink: 0,
|
|
}
|
|
|
|
const titleStyles: React.CSSProperties = {
|
|
fontSize: '12px',
|
|
fontWeight: 600,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '0.06em',
|
|
color: 'var(--text-secondary)',
|
|
}
|
|
|
|
const rightTextStyles: React.CSSProperties = {
|
|
fontSize: '10px',
|
|
fontWeight: 400,
|
|
textTransform: 'none',
|
|
letterSpacing: 'normal',
|
|
color: 'var(--text-tertiary)',
|
|
fontFamily: "'Geist Mono', monospace",
|
|
marginLeft: 'auto',
|
|
}
|
|
|
|
return (
|
|
<div style={headerStyles}>
|
|
<div style={dotStyles} aria-hidden="true" />
|
|
<span style={titleStyles}>{title}</span>
|
|
{rightText && <span style={rightTextStyles}>{rightText}</span>}
|
|
</div>
|
|
)
|
|
}
|