added profile section show, hide and movable

src/app/components/Resume/ResumePDF/index.tsx

@@ -52,6 +52,13 @@ export const ResumePDF = ({
   const showFormsOrder = formsOrder.filter((form) => formToShow[form]);
 
   const formTypeToComponent: { [type in ShowForm]: () => JSX.Element } = {
+    profile: () => (
+      <ResumePDFProfile
+              profile={profile}
+              themeColor={themeColor}
+              isPDF={isPDF}
+            />
+    ),
     workExperiences: () => (
       <ResumePDFWorkExperience
         heading={formToHeading["workExperiences"]}
@@ -119,11 +126,6 @@ export const ResumePDF = ({
               padding: `${spacing[0]} ${spacing[20]}`,
             }}
           >
-            <ResumePDFProfile
-              profile={profile}
-              themeColor={themeColor}
-              isPDF={isPDF}
-            />
             {showFormsOrder.map((form) => {
               const Component = formTypeToComponent[form];
               return <Component key={form} />;

src/app/components/ResumeForm/Form/index.tsx

@@ -47,6 +47,7 @@ export const BaseForm = ({
 );
 
 const FORM_TO_ICON: { [section in ShowForm]: typeof BuildingOfficeIcon } = {
+  profile: BuildingOfficeIcon,
   workExperiences: BuildingOfficeIcon,
   educations: AcademicCapIcon,
   projects: LightBulbIcon,

src/app/components/ResumeForm/ProfileForm.tsx

@@ -2,19 +2,44 @@ import { BaseForm } from "components/ResumeForm/Form";
 import { Input, Textarea } from "components/ResumeForm/Form/InputGroup";
 import { useAppDispatch, useAppSelector } from "lib/redux/hooks";
 import { changeProfile, selectProfile } from "lib/redux/resumeSlice";
+import { changeFormOrder, changeShowForm, selectIsFirstForm, selectIsLastForm, selectShowByForm, ShowForm } from "lib/redux/settingsSlice";
 import { ResumeProfile } from "lib/redux/types";
+import { MoveIconButton, ShowIconButton } from "./Form/IconButton";
 
 export const ProfileForm = () => {
+  const form = "profile";
+
   const profile = useAppSelector(selectProfile);
+  const showForm = useAppSelector(selectShowByForm(form));
   const dispatch = useAppDispatch();
   const { name, email, phone, url, summary, location } = profile;
 
+  const isFirstForm = useAppSelector(selectIsFirstForm(form));
+  const isLastForm = useAppSelector(selectIsLastForm(form));
+
+  const setShowForm = (showForm: boolean) => {
+    dispatch(changeShowForm({ field: form, value: showForm }));
+  };
+
+  const handleMoveClick = (type: "up" | "down") => {
+    dispatch(changeFormOrder({ form, type }));
+  };
+
   const handleProfileChange = (field: keyof ResumeProfile, value: string) => {
     dispatch(changeProfile({ field, value }));
   };
 
   return (
     <BaseForm>
+    <div className="flex items-center justify-end gap-0.5">
+          {!isFirstForm && (
+            <MoveIconButton type="up" onClick={handleMoveClick} />
+          )}
+          {!isLastForm && (
+            <MoveIconButton type="down" onClick={handleMoveClick} />
+          )}
+          <ShowIconButton show={showForm} setShow={setShowForm} />
+        </div>
       <div className="grid grid-cols-6 gap-3">
         <Input
           label="Name"
@@ -65,6 +90,7 @@ export const ProfileForm = () => {
           onChange={handleProfileChange}
         />
       </div>
+
     </BaseForm>
   );
 };

src/app/components/ResumeForm/index.tsx

@@ -17,6 +17,7 @@ import { FlexboxSpacer } from "components/FlexboxSpacer";
 import { cx } from "lib/cx";
 
 const formTypeToComponent: { [type in ShowForm]: () => JSX.Element } = {
+  profile : ProfileForm,
   workExperiences: WorkExperiencesForm,
   educations: EducationsForm,
   projects: ProjectsForm,
@@ -41,7 +42,6 @@ export const ResumeForm = () => {
       onMouseLeave={() => setIsHover(false)}
     >
       <section className="flex max-w-2xl flex-col gap-8 p-[var(--resume-padding)]">
-        <ProfileForm />
         {formsOrder.map((form) => {
           const Component = formTypeToComponent[form];
           return <Component key={form} />;

src/app/home/AutoTypingResume.tsx

@@ -67,6 +67,7 @@ export const AutoTypingResume = () => {
             ...initialSettings,
             fontSize: "12",
             formToHeading: {
+              profile :"PROFILE",
               workExperiences: resume.workExperiences[0].company
                 ? "WORK EXPERIENCE"
                 : "",

src/app/lib/redux/settingsSlice.ts

@@ -7,13 +7,15 @@ export interface Settings {
   fontSize: string;
   documentSize: string;
   formToShow: {
+    profile: boolean;
     workExperiences: boolean;
     educations: boolean;
     projects: boolean;
     skills: boolean;
     custom: boolean;
   };
   formToHeading: {
+    profile:string;
     workExperiences: string;
     educations: string;
     projects: string;
@@ -47,20 +49,22 @@ export const initialSettings: Settings = {
   fontSize: DEFAULT_FONT_SIZE,
   documentSize: "Letter",
   formToShow: {
+    profile:true,
     workExperiences: true,
     educations: true,
     projects: true,
     skills: true,
     custom: false,
   },
   formToHeading: {
+    profile:"PROFILE",
     workExperiences: "WORK EXPERIENCE",
     educations: "EDUCATION",
     projects: "PROJECT",
     skills: "SKILLS",
     custom: "CUSTOM SECTION",
   },
-  formsOrder: ["workExperiences", "educations", "projects", "skills", "custom"],
+  formsOrder: ["profile","workExperiences", "educations", "projects", "skills", "custom"],
   showBulletPoints: {
     educations: true,
     projects: true,