Split CVPreview into modular components with individual edit buttons

src/components/CVPreview/CVEducation.jsx

@@ -0,0 +1,59 @@
+import styles from './CVPreview.module.css';
+
+const CVEducation = ({ education, onEditClick }) => {
+  return (
+    <div className={styles.section}>
+      <div className={styles['section-header-container']}>
+        <h2 className={styles['section-header']}>Education</h2>
+        <button 
+          onClick={onEditClick} 
+          className={styles['section-edit-button']}
+        >
+          Edit
+        </button>
+      </div>
+      <hr className={styles.line} />
+      <div className={styles['education-list']}>
+        {education.map((edu, index) => (
+          <div key={index} className={styles['education-item']}>
+            <h3 className={styles['degree-info']}>
+              {edu.program || 'Program Not Specified'}
+            </h3>
+            <div className={styles['institution-info']}>
+              {edu.institution || 'Institution Not Specified'}
+            </div>
+            <div className={styles['education-duration']}>
+              {edu.startDate && (
+                <span className={styles['education-date']}>
+                  {edu.startDate}
+                </span>
+              )}
+              {edu.endDate && (
+                <>
+                  <span className={styles['education-date-separator']}>
+                    {' '}
+                    -{' '}
+                  </span>
+                  <span className={styles['education-date']}>
+                    {edu.endDate}
+                  </span>
+                </>
+              )}
+            </div>
+            {edu.highlights && (
+              <div className={styles['education-highlights']}>
+                {edu.highlights.split('\n').map((paragraph, pIndex) => (
+                  <p key={pIndex} className={styles['education-paragraph']}>
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CVEducation;

src/components/CVPreview/CVExperience.jsx

@@ -0,0 +1,64 @@
+import styles from './CVPreview.module.css';
+
+const CVExperience = ({ experience, onEditClick }) => {
+  return (
+    <div className={styles.section}>
+      <div className={styles['section-header-container']}>
+        <h2 className={styles['section-header']}>Professional Experience</h2>
+        <button 
+          onClick={onEditClick} 
+          className={styles['section-edit-button']}
+        >
+          Edit
+        </button>
+      </div>
+      <hr className={styles.line} />
+      {experience && experience.length > 0 ? (
+        experience.map((exp, index) => (
+          <div key={index} className={styles['experience-item']}>
+            <div className={styles['experience-header']}>
+              <div>
+                <h3 className={styles['job-title']}>{exp.jobTitle}</h3>
+                <div className={styles['company-info']}>
+                  <div>
+                    <span className={styles['company-name']}>
+                      {exp.companyName}
+                    </span>
+                  </div>
+                  <div>
+                    {(exp.startDate || exp.endDate) && (
+                      <span className={styles['job-duration']}>
+                        {exp.startDate} - {exp.endDate}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+            {exp.bulletPoints && exp.bulletPoints.length > 0 ? (
+              <ul className={styles['responsibilities-list']}>
+                {exp.bulletPoints.map((point, i) => (
+                  <li key={i} className={styles['responsibility-item']}>
+                    {point}
+                  </li>
+                ))}
+              </ul>
+            ) : exp.description ? (
+              <div className={styles['job-description']}>
+                {exp.description.split('\n').map((paragraph, pIndex) => (
+                  <p key={pIndex} className={styles['job-paragraph']}>
+                    {paragraph}
+                  </p>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        ))
+      ) : (
+        <p className={styles['no-data']}>No experience data available</p>
+      )}
+    </div>
+  );
+};
+
+export default CVExperience;

src/components/CVPreview/CVHeader.jsx

@@ -0,0 +1,114 @@
+import {
+  FaPhone,
+  FaEnvelope,
+  FaLinkedin,
+  FaGithub,
+  FaExternalLinkAlt,
+} from 'react-icons/fa';
+import styles from './CVPreview.module.css';
+
+const CVHeader = ({ fullName, contact, onEditClick }) => {
+  return (
+    <div className={styles['user-section']}>
+      <div className={styles['header-edit-container']}>
+        <h1 className={styles['cv-username']}>
+          {fullName || 'Professional Profile'}
+        </h1>
+        <button 
+          onClick={onEditClick} 
+          className={styles['section-edit-button']}
+        >
+          Edit
+        </button>
+      </div>
+      <div className={styles['personal-details']}>
+        <div className={styles['email-and-phone-box']}>
+          {contact.email && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                <FaEnvelope className={styles['icon-color']} />{' '}
+              </span>
+              {contact.email}
+            </p>
+          )}
+
+          {contact.phone && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                {' '}
+                <FaPhone className={styles['icon-color']} />{' '}
+              </span>
+              +34 {contact.phone}
+            </p>
+          )}
+        </div>
+
+        <div className={styles['github-portfolio-linkedin-box']}>
+          {contact.linkedin && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                <FaLinkedin className={styles['icon-color']} />{' '}
+              </span>
+              <a
+                href={
+                  contact.linkedin.startsWith('http')
+                    ? contact.linkedin
+                    : `https://${contact.linkedin}`
+                }
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles['contact-link']}
+              >
+                LinkedIn
+              </a>
+            </p>
+          )}
+
+          {contact.github && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                {' '}
+                <FaGithub className={styles['icon-color']} />{' '}
+              </span>
+              <a
+                href={
+                  contact.github.startsWith('http')
+                    ? contact.github
+                    : `https://github.com/${contact.github}`
+                }
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles['contact-link']}
+              >
+                GitHub
+              </a>
+            </p>
+          )}
+
+          {contact.portfolio && (
+            <p className={styles['contact-info']}>
+              <span className={styles['contact-label']}>
+                {' '}
+                <FaExternalLinkAlt className={styles['icon-color']} />{' '}
+              </span>
+              <a
+                href={
+                  contact.portfolio.startsWith('http')
+                    ? contact.portfolio
+                    : `https://${contact.portfolio}`
+                }
+                target="_blank"
+                rel="noopener noreferrer"
+                className={styles['contact-link']}
+              >
+                Portfolio
+              </a>
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CVHeader;