Feat: Add multiple links in Summery xitanggg#124

Requirement: Add multiple links (LinkedIn, GitHub) in summary Support Added: 1. Added Portfolio, LinkedIn and GitHub links in the summary 2. Removed url from `ResumeProfile` type and introduced `portfolioLink, linkedinLink, githubLink` keys. 3. Modified UI in order to reflect links in the Form. 4. Updated logic to redirect if only username is present.
prajwalprogrammer · Nov 16, 2024 · c6eac2e · c6eac2e
1 parent 4f8255a
commit c6eac2e
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 16 deletions.
diff --git a/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx b/src/app/components/Resume/ResumePDF/ResumePDFProfile.tsx
@@ -20,8 +20,8 @@ export const ResumePDFProfile = ({
   themeColor: string;
   isPDF: boolean;
 }) => {
-  const { name, email, phone, url, summary, location } = profile;
-  const iconProps = { email, phone, location, url };
+  const { name, email, phone, portfolioLink, linkedinLink, githubLink, summary, location } = profile;
+  const iconProps = { email, phone, location,portfolioLink, linkedinLink, githubLink };
 
   return (
     <ResumePDFSection style={{ marginTop: spacing["4"] }}>
@@ -38,21 +38,28 @@ export const ResumePDFProfile = ({
           ...styles.flexRowBetween,
           flexWrap: "wrap",
           marginTop: spacing["0.5"],
+          justifyContent: "center",
+          alignContent: "center",
+          gap:spacing["2.5"],
         }}
       >
         {Object.entries(iconProps).map(([key, value]) => {
           if (!value) return null;
 
           let iconType = key as IconType;
-          if (key === "url") {
-            if (value.includes("github")) {
-              iconType = "url_github";
-            } else if (value.includes("linkedin")) {
+          switch (key) {
+            case "portfolioLink":
+              iconType = "url";
+              break;
+            case "linkedinLink":
               iconType = "url_linkedin";
-            }
+              break;
+            case "githubLink":
+              iconType = "url_github";
+              break;
           }
 
-          const shouldUseLinkWrapper = ["email", "url", "phone"].includes(key);
+          const shouldUseLinkWrapper = ["email", "phone", "portfolioLink", "linkedinLink", "githubLink"].includes(key);
           const Wrapper = ({ children }: { children: React.ReactNode }) => {
             if (!shouldUseLinkWrapper) return <>{children}</>;
 
@@ -66,6 +73,14 @@ export const ResumePDFProfile = ({
                 src = `tel:${value.replace(/[^\d+]/g, "")}`; // Keep only + and digits
                 break;
               }
+              case "linkedinLink": {
+                src = value.startsWith("http") ? value : `https://www.linkedin.com/in/${value}`;
+                break;
+              }
+              case "githubLink": {
+                src = value.startsWith("http") ? value : `https://github.com/${value}`;
+                break;
+              }
               default: {
                 src = value.startsWith("http") ? value : `https://${value}`;
               }
@@ -83,8 +98,8 @@ export const ResumePDFProfile = ({
               key={key}
               style={{
                 ...styles.flexRow,
-                alignItems: "center",
-                gap: spacing["1"],
+                gap: spacing["2"],
+                flex: "0 1 calc(33.333% - 10px)",
               }}
             >
               <ResumePDFIcon type={iconType} isPDF={isPDF} />

diff --git a/src/app/components/ResumeForm/ProfileForm.tsx b/src/app/components/ResumeForm/ProfileForm.tsx
@@ -7,7 +7,7 @@ import { ResumeProfile } from "lib/redux/types";
 export const ProfileForm = () => {
   const profile = useAppSelector(selectProfile);
   const dispatch = useAppDispatch();
-  const { name, email, phone, url, summary, location } = profile;
+  const { name, email, phone, summary, location, portfolioLink, linkedinLink, githubLink } = profile;
 
   const handleProfileChange = (field: keyof ResumeProfile, value: string) => {
     dispatch(changeProfile({ field, value }));
@@ -49,11 +49,11 @@ export const ProfileForm = () => {
           onChange={handleProfileChange}
         />
         <Input
-          label="Website"
+          label="Portfolio"
           labelClassName="col-span-4"
-          name="url"
-          placeholder="linkedin.com/in/khanacademy"
-          value={url}
+          name="portfolioLink"
+          placeholder="khanacademy.com"
+          value={portfolioLink}
           onChange={handleProfileChange}
         />
         <Input
@@ -64,6 +64,22 @@ export const ProfileForm = () => {
           value={location}
           onChange={handleProfileChange}
         />
+        <Input
+          label="LinkedIn Username"
+          labelClassName="col-span-3"
+          name="linkedinLink"
+          placeholder="linkedin.com/in/khanacademy"
+          value={linkedinLink}
+          onChange={handleProfileChange}
+        />
+        <Input
+          label="Github Username"
+          labelClassName="col-span-3"
+          name="githubLink"
+          placeholder="github.com/khanacademy"
+          value={githubLink}
+          onChange={handleProfileChange}
+        />
       </div>
     </BaseForm>
   );

diff --git a/src/app/lib/redux/types.ts b/src/app/lib/redux/types.ts
@@ -2,9 +2,11 @@ export interface ResumeProfile {
   name: string;
   email: string;
   phone: string;
-  url: string;
   summary: string;
   location: string;
+  portfolioLink: string;
+  linkedinLink: string;
+  githubLink: string;
 }
 
 export interface ResumeWorkExperience {