FEAT: Makes profile section 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={false} />
+    ),
+
     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/ResumeDropzone.tsx

@@ -84,6 +84,7 @@ export const ResumeDropzone = ({
         projects: resume.projects.length > 0,
         skills: resume.skills.descriptions.length > 0,
         custom: resume.custom.descriptions.length > 0,
+        profile: resume.custom.descriptions.length > 0
       };
       for (const section of sections) {
         settings.formToShow[section] = sectionToFormToShow[section];

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

@@ -46,12 +46,13 @@ export const BaseForm = ({
   </section>
 );
 
-const FORM_TO_ICON: { [section in ShowForm]: typeof BuildingOfficeIcon } = {
+export const FORM_TO_ICON: { [section in ShowForm]: typeof BuildingOfficeIcon } = {
   workExperiences: BuildingOfficeIcon,
   educations: AcademicCapIcon,
   projects: LightBulbIcon,
   skills: WrenchIcon,
   custom: WrenchIcon,
+  profile: LightBulbIcon
 };
 
 export const Form = ({

src/app/components/ResumeForm/ProfileForm.tsx

@@ -1,20 +1,72 @@
-import { BaseForm } from "components/ResumeForm/Form";
+import { BaseForm, FORM_TO_ICON } 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 { ResumeProfile } from "lib/redux/types";
+import {
+  selectIsFirstForm,
+  selectIsLastForm,
+  changeFormOrder,
+  selectShowByForm,
+  changeShowForm,
+  selectHeadingByForm,
+  changeFormHeading,
+} from "lib/redux/settingsSlice";
+import {
+  MoveIconButton,
+  ShowIconButton,
+} from "components/ResumeForm/Form/IconButton";
 
 export const ProfileForm = () => {
   const profile = useAppSelector(selectProfile);
   const dispatch = useAppDispatch();
+  const form = "profile";
+  const isFirstForm = useAppSelector(selectIsFirstForm(form));
+  const isLastForm = useAppSelector(selectIsLastForm(form));
+  const showForm = useAppSelector(selectShowByForm(form));
+  const heading = useAppSelector(selectHeadingByForm(form));
+
+  const handleMoveClick = (type: "up" | "down") => {
+    dispatch(changeFormOrder({ form, type }));
+  };
   const { name, email, phone, url, summary, location } = profile;
 
   const handleProfileChange = (field: keyof ResumeProfile, value: string) => {
     dispatch(changeProfile({ field, value }));
   };
 
+  const setShowForm = (showForm: boolean) => {
+    dispatch(changeShowForm({ field: form, value: showForm }));
+  };
+
+  const setHeading = (heading: string) => {
+    dispatch(changeFormHeading({ field: form, value: heading }));
+  };
+
+  const Icon = FORM_TO_ICON[form];
+
   return (
     <BaseForm>
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex grow items-center gap-2">
+          <Icon className="h-6 w-6 text-gray-600" aria-hidden="true" />
+          <input
+            type="text"
+            className="block w-full border-b border-transparent text-lg font-semibold tracking-wide text-gray-900 outline-none hover:border-gray-300 hover:shadow-sm focus:border-gray-300 focus:shadow-sm"
+            value={heading}
+            onChange={(e) => setHeading(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center gap-0.5">
+          {!isFirstForm && (
+            <MoveIconButton type="up" onClick={handleMoveClick} />
+          )}
+          {!isLastForm && (
+            <MoveIconButton type="down" onClick={handleMoveClick} />
+          )}
+          <ShowIconButton show={showForm} setShow={setShowForm} />
+        </div>
+      </div>
       <div className="grid grid-cols-6 gap-3">
         <Input
           label="Name"

src/app/components/ResumeForm/index.tsx

@@ -6,7 +6,7 @@ import {
   useSetInitialStore,
 } from "lib/redux/hooks";
 import { ShowForm, selectFormsOrder } from "lib/redux/settingsSlice";
-import { ProfileForm } from "components/ResumeForm/ProfileForm";
+import { ProfileForm } from "./ProfileForm";
 import { WorkExperiencesForm } from "components/ResumeForm/WorkExperiencesForm";
 import { EducationsForm } from "components/ResumeForm/EducationsForm";
 import { ProjectsForm } from "components/ResumeForm/ProjectsForm";
@@ -22,6 +22,7 @@ const formTypeToComponent: { [type in ShowForm]: () => JSX.Element } = {
   projects: ProjectsForm,
   skills: SkillsForm,
   custom: CustomForm,
+  profile: ProfileForm
 };
 
 export const ResumeForm = () => {
@@ -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

@@ -74,6 +74,7 @@ export const AutoTypingResume = () => {
               projects: resume.projects[0].project ? "PROJECT" : "",
               skills: resume.skills.featuredSkills[0].skill ? "SKILLS" : "",
               custom: "CUSTOM SECTION",
+              profile: "PROFILE"
             },
           }}
         />

src/app/lib/redux/settingsSlice.ts

@@ -12,13 +12,16 @@ export interface Settings {
     projects: boolean;
     skills: boolean;
     custom: boolean;
+    profile: boolean;
   };
   formToHeading: {
     workExperiences: string;
     educations: string;
     projects: string;
     skills: string;
     custom: string;
+    profile: string;
+
   };
   formsOrder: ShowForm[];
   showBulletPoints: {
@@ -52,15 +55,17 @@ export const initialSettings: Settings = {
     projects: true,
     skills: true,
     custom: false,
+    profile: true,
   },
   formToHeading: {
     workExperiences: "WORK EXPERIENCE",
     educations: "EDUCATION",
     projects: "PROJECT",
     skills: "SKILLS",
     custom: "CUSTOM SECTION",
+    profile: "Profile"
   },
-  formsOrder: ["workExperiences", "educations", "projects", "skills", "custom"],
+  formsOrder: ["profile","workExperiences", "educations", "projects", "skills", "custom"],
   showBulletPoints: {
     educations: true,
     projects: true,