Spaces:
Sleeping
Sleeping
| import { useEffect } from 'react'; | |
| import type { Source } from '../types'; | |
| interface SourceModalProps { | |
| source: Source; | |
| onClose: () => void; | |
| } | |
| export function SourceModal({ source, onClose }: SourceModalProps) { | |
| useEffect(() => { | |
| const handleKeyDown = (e: KeyboardEvent) => { | |
| if (e.key === 'Escape') onClose(); | |
| }; | |
| window.addEventListener('keydown', handleKeyDown); | |
| return () => window.removeEventListener('keydown', handleKeyDown); | |
| }, [onClose]); | |
| return ( | |
| <div className="modal-backdrop" onClick={onClose}> | |
| <div className="modal-content" onClick={(e) => e.stopPropagation()}> | |
| <header className="modal-header"> | |
| <div className="modal-title-container"> | |
| <svg | |
| className="source-icon modal-icon" | |
| width="18" | |
| height="18" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| strokeWidth="2" | |
| > | |
| <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> | |
| <polyline points="14 2 14 8 20 8"></polyline> | |
| <line x1="16" y1="13" x2="8" y2="13"></line> | |
| <line x1="16" y1="17" x2="8" y2="17"></line> | |
| <polyline points="10 9 9 9 8 9"></polyline> | |
| </svg> | |
| <h3>{source.filename}</h3> | |
| <span className="modal-badge">Chunk {source.chunk_index + 1}</span> | |
| </div> | |
| <button | |
| className="modal-close-btn" | |
| onClick={onClose} | |
| title="Close (Esc)" | |
| > | |
| <svg | |
| width="20" | |
| height="20" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| strokeWidth="2" | |
| > | |
| <line x1="18" y1="6" x2="6" y2="18"></line> | |
| <line x1="6" y1="6" x2="18" y2="18"></line> | |
| </svg> | |
| </button> | |
| </header> | |
| <div className="modal-body"> | |
| <pre className="source-snippet">{source.content}</pre> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |