| import React from 'react'; | |
| import { AppStatus } from '../../../shared/types'; | |
| interface Props { | |
| status: AppStatus; | |
| } | |
| export function StatusBar({ status }: Props) { | |
| const statusColor = { | |
| idle: '#888', | |
| indexing: '#f0ad4e', | |
| ready: '#5cb85c', | |
| error: '#d9534f', | |
| }[status.indexStatus] ?? '#888'; | |
| return ( | |
| <div style={{ | |
| padding: '4px 20px', | |
| background: '#0f1729', | |
| borderTop: '1px solid #0f3460', | |
| display: 'flex', | |
| alignItems: 'center', | |
| gap: '16px', | |
| fontSize: '11px', | |
| color: '#888', | |
| }}> | |
| <span> | |
| <span style={{ | |
| display: 'inline-block', | |
| width: '8px', | |
| height: '8px', | |
| borderRadius: '50%', | |
| background: statusColor, | |
| marginRight: '6px', | |
| }} /> | |
| Index: {status.indexStatus} | |
| </span> | |
| <span>Documents: {status.documentsLoaded}</span> | |
| {status.lastActivity && ( | |
| <span>Last activity: {new Date(status.lastActivity).toLocaleTimeString()}</span> | |
| )} | |
| </div> | |
| ); | |
| } | |