Spaces:
Running
Running
File size: 1,662 Bytes
2e9c97f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/**
* @license
* SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import type { ResumeDocument, ResumeSectionType, ActiveEditor } from '../lib/types';
import EditableSection from './EditableSection';
interface ResumePreviewProps {
document: ResumeDocument;
onContentChange: (sectionId: ResumeSectionType, newContent: string) => void;
activeSectionId: ResumeSectionType | undefined;
onSectionFocus: (editorState: ActiveEditor | null) => void;
}
const ORDERED_SECTION_KEYS: ResumeSectionType[] = ["Professional Summary", "Skills Section", "Experience", "Education"];
export default function ResumePreview({
document,
onContentChange,
activeSectionId,
onSectionFocus
}: ResumePreviewProps) {
const handleFocus = (sectionId: ResumeSectionType, content: string) => {
onSectionFocus({ sectionId, content });
};
const handleBlur = () => {
onSectionFocus(null);
};
// Create a map for quick lookup
const docMap = new Map(document.map(section => [section.id, section]));
return (
<div className="resume-preview-paper" aria-label="Live Resume Preview" tabIndex={-1}>
{ORDERED_SECTION_KEYS.map((key) => {
const section = docMap.get(key);
if (section) {
return (
<EditableSection
key={section.id}
section={section}
onContentChange={onContentChange}
isActive={activeSectionId === section.id}
onFocus={handleFocus}
onBlur={handleBlur}
/>
);
}
return null; // Don't render a section if it's not in the document
})}
</div>
);
}
|