"use client";
import React, { useState, useEffect } from "react";
import ExperienceSection from "./components/ExperienceSection";
import EducationSection from "./components/EducationSection";
import SkillsForm from "./components/SkillSection";
import ResumeScore from "./components/ResumeScore";
import SummarySection from "./components/SummarySection";
import ProjectSection from "./components/ProjectSection";
import CertificationsForm from "./components/Certification";
import LanguagesForm from "./components/LanguagesSection";
import PersonalInfoForm from "./components/PersonalInfo";
import StrengthForm from "./components/StrengthSection";
import AchievementForm from "./components/AchievementSection";
import axios from "axios";
const Page = () => {
const [resumeScore, setResumeScore] = useState(0);
const [expData, setExpData] = useState([]);
const [educationData, setEducationData] = useState([]);
const [skillsData, setSkillsData] = useState([]);
const [summaryData, setSummaryData] = useState("");
const [projectData, setProjectData] = useState([]);
const [certificationData, setCertificationData] = useState([]);
const [languageData, setLanguageData] = useState([]);
const [personalData, setPersonalData] = useState({
fullName: "",
email: "",
phone: "",
address: "",
linkedin: "",
github: "",
portfolio: "",
});
const [strengthData, setStrengthData] = useState([]);
const [achievementData, setAchievementData] = useState([]);
const [sampleSelectedTemplate, setSampleSelectedTemplate] = useState(false);
const handleSampleResume = async () => {
try {
const response = await [Link]("/api/sampleResume");
const data = [Link];
setExpData([Link] || []);
setEducationData([Link] || []);
setSkillsData([Link] || []);
setSummaryData([Link] || "");
setProjectData([Link] || []);
setCertificationData([Link] || []);
setLanguageData([Link] || []);
setPersonalData([Link] || {});
setStrengthData([Link] || []);
setAchievementData([Link] || []);
setSampleSelectedTemplate(true);
} catch (error) {
[Link]("Error fetching sample resume:", error);
}
};
return (
<>
<button onClick={handleSampleResume} className="mb-4 p-2 bg-blue-500 text-
white rounded">
Load Sample Resume
</button>
<PersonalInfoForm personalData={personalData}
setPersonalData={setPersonalData} isSample={sampleSelectedTemplate} />
<SummarySection summaryData={summaryData} setSummaryData={setSummaryData}
isSample={sampleSelectedTemplate} />
<ExperienceSection resumeScore={resumeScore} setResumeScore={setResumeScore}
expData={expData} setExpData={setExpData} isSample={sampleSelectedTemplate} />
<EducationSection educationData={educationData}
setEducationData={setEducationData} isSample={sampleSelectedTemplate} />
<SkillsForm skillsData={skillsData} setSkillsData={setSkillsData}
isSample={sampleSelectedTemplate} />
<ProjectSection projectData={projectData} setProjectData={setProjectData}
isSample={sampleSelectedTemplate} />
<CertificationsForm certificationData={certificationData}
setCertificationData={setCertificationData} isSample={sampleSelectedTemplate} />
<LanguagesForm languageData={languageData} setLanguageData={setLanguageData}
isSample={sampleSelectedTemplate} />
<StrengthForm strengthData={strengthData} setStrengthData={setStrengthData}
isSample={sampleSelectedTemplate} />
<AchievementForm achievementData={achievementData}
setAchievementData={setAchievementData} isSample={sampleSelectedTemplate} />
<ResumeScore resumeScore={resumeScore} />
</>
);
};
export default Page;
///ProjectSection
import React from "react";
import ProjectForm from "./ProjectForm";
const ProjectSection = ({ projectData, setProjectData, isSample }) => {
const updateProject = (index, newData) => {
const newProjects = [...projectData];
newProjects[index] = newData;
setProjectData(newProjects);
};
return (
<div>
<h2 className="text-xl font-bold">Projects</h2>
{[Link]((project, index) => (
<ProjectForm
key={[Link] || index}
index={index}
data={project}
onChange={(newData) => updateProject(index, newData)}
isSample={isSample}
/>
))}
</div>
);
};
export default ProjectSection;
///ProjectForm
import React, { useEffect, useState } from "react";
const ProjectForm = ({ data, onChange, index, isSample }) => {
const [isEdit, setIsEdit] = useState(false);
const handleChange = (e) => {
const { name, value } = [Link];
const updated = { ...data, [name]: value };
onChange(updated);
// Only auto-disable if NOT sample
const allFilled = [Link](updated).every((val) => val && val !== "");
if (!isSample && allFilled) {
setIsEdit(true); // disable fields
}
};
const handleEditClick = () => {
setIsEdit(false); // re-enable fields
};
return (
<div className="border p-4 my-2">
<div className="flex justify-between">
<h3 className="font-semibold">Project {index + 1}</h3>
{isEdit && (
<button onClick={handleEditClick} className="text-blue-500 underline">
Edit
</button>
)}
</div>
<input
name="title"
placeholder="Project Title"
value={[Link]}
onChange={handleChange}
disabled={isEdit}
className="border px-2 py-1 w-full mt-2"
/>
<textarea
name="description"
placeholder="Project Description"
value={[Link]}
onChange={handleChange}
disabled={isEdit}
className="border px-2 py-1 w-full mt-2"
/>
{/* Add more fields similarly... */}
</div>
);
};
export default ProjectForm;