geulah
1bede93cd1
- Set up React + TypeScript + Vite project with TailwindCSS - Implement Zustand store for CV data management - Create personal details editor with validation - Add ATS-friendly template for CV preview - Build stepper navigation component - Include schema validation with Zod - Configure ESLint and Prettier for code quality
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { useCvStore } from '../store/cvStore';
|
|
import ATSTemplate from '../templates/ATSTemplate';
|
|
|
|
interface PreviewPanelProps {
|
|
className?: string;
|
|
}
|
|
|
|
const PreviewPanel: React.FC<PreviewPanelProps> = ({ className = '' }) => {
|
|
const cv = useCvStore(state => state.cv);
|
|
const templateId = useCvStore(state => state.cv.templateId);
|
|
|
|
return (
|
|
<div className={`bg-gray-100 rounded-lg shadow-inner overflow-auto ${className}`}>
|
|
<div className="sticky top-0 bg-gray-200 p-3 border-b flex justify-between items-center">
|
|
<h2 className="text-lg font-medium text-gray-700">Preview</h2>
|
|
<div className="text-sm text-gray-500">
|
|
Template: <span className="font-medium">{templateId === 'ats' ? 'ATS-Friendly' : templateId}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
{/* Render the appropriate template based on templateId */}
|
|
{templateId === 'ats' && <ATSTemplate cv={cv} />}
|
|
{/* Add more template options here as they are implemented */}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PreviewPanel; |