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 RedHatTabs from './components/RedHatTabs'; import RedHatIcon from './components/RedHatIcon'; 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); }; }, []); // Define tab content with icons const tabs = [ { title: "Personal Info", icon: , content: ( ) }, { title: "Key Skills", icon: , content: ( ) }, { title: "Experience", icon: , content: ( ) }, { title: "Education", icon: , content: ( ) }, { title: "Certifications", icon: , content: ( ) }, { title: "Contact", icon: , content: ( ) } ]; const handleTabChange = (index: number) => { setActiveTab(index); }; return ( Red Hat Consulting CV Generator Reset CV

## CV Form

Fill out the form tabs above to generate your CV

## PDF Generator

{ e.preventDefault(); window.generatePDF && window.generatePDF(); }}> Generate PDF

## CV Preview

); } export default App;