Spaces:
Runtime error
Runtime error
| export default function Header({ scanProgress, scanPhase }) { | |
| return ( | |
| <header style={{ | |
| padding: '24px 32px', | |
| borderBottom: '1px solid var(--border)', | |
| }}> | |
| <div style={{ | |
| display: 'flex', | |
| justifyContent: 'space-between', | |
| alignItems: 'center', | |
| }}> | |
| <div> | |
| <h1 style={{ | |
| fontSize: '28px', | |
| fontWeight: 700, | |
| color: 'var(--green)', | |
| letterSpacing: '4px', | |
| }}> | |
| ■ OPERATOR | |
| </h1> | |
| <p style={{ | |
| fontSize: '12px', | |
| color: 'var(--text-dim)', | |
| marginTop: '4px', | |
| fontStyle: 'italic', | |
| }}> | |
| The AI Agent That Works While You Talk. | |
| </p> | |
| </div> | |
| {scanProgress > 0 && scanProgress < 100 && ( | |
| <span style={{ | |
| fontSize: '12px', | |
| color: 'var(--green)', | |
| letterSpacing: '2px', | |
| fontWeight: 700, | |
| animation: 'pulse 1.5s infinite', | |
| }}> | |
| SCANNING... | |
| </span> | |
| )} | |
| </div> | |
| {/* Progress bar */} | |
| {scanProgress > 0 && scanProgress < 100 && ( | |
| <div style={{ marginTop: '16px' }}> | |
| <div style={{ | |
| display: 'flex', | |
| justifyContent: 'space-between', | |
| alignItems: 'center', | |
| marginBottom: '6px', | |
| }}> | |
| <span style={{ | |
| fontSize: '11px', | |
| color: 'var(--text-dim)', | |
| letterSpacing: '1px', | |
| }}> | |
| {scanPhase} | |
| </span> | |
| <span style={{ | |
| fontSize: '11px', | |
| color: 'var(--text-dim)', | |
| fontVariantNumeric: 'tabular-nums', | |
| }}> | |
| {scanProgress}% | |
| </span> | |
| </div> | |
| <div style={{ | |
| width: '100%', | |
| height: '6px', | |
| background: '#1a1a1a', | |
| borderRadius: '3px', | |
| overflow: 'hidden', | |
| }}> | |
| <div style={{ | |
| width: `${scanProgress}%`, | |
| height: '100%', | |
| background: 'linear-gradient(90deg, var(--green), #00cc6a)', | |
| borderRadius: '3px', | |
| boxShadow: '0 0 8px rgba(0, 255, 136, 0.4)', | |
| }} /> | |
| </div> | |
| </div> | |
| )} | |
| </header> | |
| ); | |
| } | |