Add support for more than 6 featured skills xitanggg#117

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@react-pdf/renderer": "^3.1.10",
+    "@react-pdf/renderer": "^3.4.4",
     "@reduxjs/toolkit": "^1.9.5",
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.7",

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

@@ -5,7 +5,7 @@ import {
   ResumeFeaturedSkill,
 } from "components/Resume/ResumePDF/common";
 import { styles, spacing } from "components/Resume/ResumePDF/styles";
-import type { ResumeSkills } from "lib/redux/types";
+import type { ResumeSkills, FeaturedSkill } from "lib/redux/types";
 
 export const ResumePDFSkills = ({
   heading,
@@ -20,11 +20,15 @@ export const ResumePDFSkills = ({
 }) => {
   const { descriptions, featuredSkills } = skills;
   const featuredSkillsWithText = featuredSkills.filter((item) => item.skill);
-  const featuredSkillsPair = [
-    [featuredSkillsWithText[0], featuredSkillsWithText[3]],
-    [featuredSkillsWithText[1], featuredSkillsWithText[4]],
-    [featuredSkillsWithText[2], featuredSkillsWithText[5]],
-  ];
+  const featuredSkillsPair: FeaturedSkill[][] = [];
+
+  for (let i = 0; i < 3; i++) {
+    const pair = [];
+    for (let j = 0; j < Math.ceil(featuredSkillsWithText.length / 3); j++) {
+      pair.push(featuredSkillsWithText[i + j * 3]);
+    }
+    featuredSkillsPair.push(pair);
+  }
 
   return (
     <ResumePDFSection themeColor={themeColor} heading={heading} wrap={false}>

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

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
 import { INPUT_CLASS_NAME } from "components/ResumeForm/Form/InputGroup";
+import { DeleteIconButton } from "components/ResumeForm/Form/IconButton";
+import { useAppDispatch } from "lib/redux/hooks";
+import { deleteFeaturedSkill } from "lib/redux/resumeSlice";
 
 export const FeaturedSkillInput = ({
   skill,
@@ -8,16 +11,22 @@ export const FeaturedSkillInput = ({
   placeholder,
   className,
   circleColor,
+  idx,
 }: {
   skill: string;
   rating: number;
   setSkillRating: (skill: string, rating: number) => void;
   placeholder: string;
   className?: string;
   circleColor?: string;
+  idx: number;
 }) => {
+  const dispatch = useAppDispatch();
+  const handleDeleteClick = () => {
+    dispatch(deleteFeaturedSkill({ idx }));
+  };
   return (
-    <div className={`flex ${className}`}>
+    <div className={`flex items-center ${className}`}>
       <input
         type="text"
         value={skill}
@@ -30,6 +39,10 @@ export const FeaturedSkillInput = ({
         setRating={(newRating) => setSkillRating(skill, newRating)}
         circleColor={circleColor}
       />
+      <DeleteIconButton
+        onClick={handleDeleteClick}
+        tooltipText={"Delete skill"}
+      />
     </div>
   );
 };

src/app/components/ResumeForm/SkillsForm.tsx

@@ -36,7 +36,7 @@ export const SkillsForm = () => {
   };
 
   return (
-    <Form form={form}>
+    <Form form={form} addButtonText="Add Skill">
       <div className="col-span-full grid grid-cols-6 gap-3">
         <div className="relative col-span-full">
           <BulletListTextarea
@@ -77,6 +77,7 @@ export const SkillsForm = () => {
             }}
             placeholder={`Featured Skill ${idx + 1}`}
             circleColor={themeColor}
+            idx={idx}
           />
         ))}
       </div>

src/app/lib/redux/resumeSlice.ts

@@ -135,6 +135,13 @@ export const resumeSlice = createSlice({
         featuredSkill.rating = rating;
       }
     },
+    deleteFeaturedSkill: (
+      draft,
+      action: PayloadAction<{ idx: number }>
+    ) => {
+      const { idx } = action.payload;
+      draft.skills.featuredSkills.splice(idx, 1);
+    },
     changeCustom: (
       draft,
       action: PayloadAction<{ field: "descriptions"; value: string[] }>
@@ -157,6 +164,10 @@ export const resumeSlice = createSlice({
           draft.projects.push(structuredClone(initialProject));
           return draft;
         }
+        case "skills": {
+          draft.skills.featuredSkills.push(structuredClone(initialFeaturedSkill));
+          return draft;
+        }
       }
     },
     moveSectionInForm: (
@@ -207,6 +218,7 @@ export const {
   changeEducations,
   changeProjects,
   changeSkills,
+  deleteFeaturedSkill,
   changeCustom,
   addSectionInForm,
   moveSectionInForm,