import { Box, Container, Stack } from '@chakra-ui/react'; import { GeneralInfoForm } from './components/GeneralInfoForm'; import { KeySkillsForm } from './components/KeySkillsForm'; import { ExperiencesForm } from './components/ExperiencesForm'; import { EducationForm } from './components/EducationForm'; import { CertificationsForm } from './components/CertificationsForm'; import { ContactInfoForm } from './components/ContactInfoForm'; import { CVPreview } from './components/CVPreview'; import { PDFGenerator } from './components/PDFGenerator'; import { useCV } from './hooks/useCV'; import React, { useState, useEffect, useRef } from 'react'; // @ts-ignore import RedHatButton from './components/RedHatButton'; import './App.css'; // Import Red Hat Design System components import '@rhds/elements/rh-tabs/rh-tabs.js'; import '@rhds/elements/rh-card/rh-card.js'; import '@rhds/elements/rh-cta/rh-cta.js'; // Red Hat brand colors const colors = { red: "#ee0000", blue: "#0066cc", darkBlue: "#004080", gray: { light: "#f5f5f5", medium: "#d2d2d2", dark: "#4c4c4c" } }; function App() { const [activeTab, setActiveTab] = useState(0); const tabsContainerRef = useRef(null); const { cv, isLoadingUserData, updateGeneralInfo, addKeySkill, updateKeySkill, removeKeySkill, addExperience, updateExperience, removeExperience, addEducation, updateEducation, removeEducation, addCertification, updateCertification, removeCertification, importCertificationsFromCSV, importUserDataFromRover, updateContactInfo, updateAdditionalInfo, resetCV } = useCV(); const tabTitles = ['General Info', 'Key Skills', 'Experiences', 'Education', 'Certifications', 'Contact Info']; // Handle tab changes useEffect(() => { const tabsContainer = tabsContainerRef.current; if (!tabsContainer) return; const tabsElement = tabsContainer.querySelector('rh-tabs'); if (!tabsElement) return; const handleTabChange = (e: Event) => { const customEvent = e as CustomEvent; if (customEvent.detail && typeof customEvent.detail.activeIndex === 'number') { setActiveTab(customEvent.detail.activeIndex); } }; tabsElement.addEventListener('active-tab-changed', handleTabChange); return () => { tabsElement.removeEventListener('active-tab-changed', handleTabChange); }; }, []); // Render tab content const renderTabContent = (index: number) => { switch(index) { case 0: return ( ); case 1: return ( ); case 2: return ( ); case 3: return ( ); case 4: return ( ); case 5: return ( ); default: return null; } }; return ( Red Hat Consulting CV Generator Reset CV

## CV Form

{tabTitles.map((title, index) => ( {title} ))} {tabTitles.map((_, index) => (
{renderTabContent(index)}
))}
Fill out the form tabs above to generate your CV

## PDF Generator

{ e.preventDefault(); document.querySelector('button[data-generate-pdf]')?.click(); }}> Generate PDF

## CV Preview

); } export default App;