feat: Social icons & urls

package.json

@@ -34,6 +34,7 @@
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0",
+    "react-icons": "^4.7.1",
     "zustand": "^3.7.2"
   },
   "devDependencies": {

src/helpers/constants/resume-data.json

@@ -5,7 +5,7 @@
     "image": "https://randomuser.me/api/portraits/men/18.jpg",
     "email": "[email protected]",
     "phone": "+91 9876543210",
-    "url": "www.github.com/sadanandpai/",
+    "url": "www.e-resume.vercel.app",
     "summary": "I am a web developer having expertise in frontend development and exposure to back- end development. I design and develop web applications using the latest technologies to deliver the product with quality code.",
     "location": {
       "address": "",
@@ -134,7 +134,7 @@
       "highlights": [
         "* Worked on a team of 5 developers to develop a web application for a client"
       ],
-      "summary": "<ul><li>Design easy user interfaces and great user experiences for the digital platforms of small companies</li><li>Wordpress development, including themes creation or customization, custom plugins development and training</li><li>E-commerce maintenance with Fastcommerce, a Brazilian e-commerce platform</li><li>E-commerce development with Magento, customizing preexisting themes</li><li>Integrate external services such as payment services, delivery, etc into Magento solutions</li><li>VPS configuration and optimization (Apache & Nginx)</li></ul>",
+      "summary": "<ul><li>Design easy user interfaces and great user experiences for the digital platforms of small companies</li><li>Wordpress development, including themes creation or customization, custom plugins development and training</li><li>E-commerce maintenance with Fastcommerce, a Brazilian e-commerce platform</li><li>E-commerce development with Magento, customizing preexisting themes</li><li>Integrate external services such as payment services, delivery, etc into Magento solutions</li></ul>",
       "years": "4 year"
     }
   ],

src/helpers/icons/index.ts

@@ -0,0 +1,17 @@
+import { AiFillGithub } from 'react-icons/ai';
+import { AiFillLinkedin } from 'react-icons/ai';
+import { AiOutlineTwitter } from 'react-icons/ai';
+import { FaHackerrank } from 'react-icons/fa';
+import { SiCodechef } from 'react-icons/si';
+import { SiHackerearth } from 'react-icons/si';
+import { SiLeetcode } from 'react-icons/si';
+
+export const socialIcons = new Map([
+  ['linkedin', AiFillLinkedin],
+  ['github', AiFillGithub],
+  ['twitter', AiOutlineTwitter],
+  ['hackerrank', FaHackerrank],
+  ['hackerearth', SiHackerearth],
+  ['codechef', SiCodechef],
+  ['leetcode', SiLeetcode],
+]);

src/stores/basic.interface.ts

@@ -1,4 +1,4 @@
-type IProfiles = {
+export type IProfiles = {
   network: string;
   username: string;
   url: string;

src/templates/modern/components/BasicIntro.tsx

@@ -1,9 +1,9 @@
+import { BsGlobe } from 'react-icons/bs';
 import { ProfileContact } from '../atoms/ProfileContact';
+import { ProfileImage } from 'src/helpers/common/components/ProfileImage';
 import { ProfileName } from '../atoms/ProfileName';
 import { SectionSubtitle } from '../atoms/SectionSubtitle';
 
-import { ProfileImage } from 'src/helpers/common/components/ProfileImage';
-
 export const BasicIntro = ({
   name,
   label,
@@ -29,8 +29,11 @@ export const BasicIntro = ({
         <div className="flex gap-3">
           <ProfileContact text={phone} />
           <ProfileContact text={email} />
-          <ProfileContact text={url} />
           <ProfileContact text={city} />
+          <div className="flex gap-2 ml-2 items-center">
+            <BsGlobe />
+            <ProfileContact text={url} />
+          </div>
         </div>
       </div>
       <ProfileImage src={image} height="100px" width="100px" />

src/templates/professional/ProfessionalTemplate.tsx

@@ -5,14 +5,14 @@ import Achievements from './components/Achievements';
 import BasicIntro from './components/BasicIntro';
 import { Education } from './components/Education';
 import Involvement from './components/Involvement';
+import { Objective } from './components/Objective';
 import RatedSkills from './components/RatedSkills';
 import { Section } from './components/Section';
 import { SectionValidator } from 'src/helpers/common/components/ValidSectionRenderer';
 import { StateContext } from 'src/modules/builder/resume/ResumeLayout';
 import UnratedSkills from './components/UnratedSkills';
 import Work from './components/Work';
 import styled from '@emotion/styled';
-import { Objective } from './components/Objective';
 
 const ResumeContainer = styled.div`
   display: flex;
@@ -51,7 +51,11 @@ export default function ProfessionalTemplate() {
   return (
     <ResumeContainer>
       <LeftSection>
-        <Section title={resumeData.basics?.name} titleClassname="text-xl font-bold">
+        <Section
+          title={resumeData.basics?.name}
+          profiles={resumeData.basics.profiles}
+          titleClassname="text-xl font-bold"
+        >
           <BasicIntro basics={resumeData.basics} />
         </Section>
         <SectionValidator value={resumeData.work}>

src/templates/professional/components/Section.tsx

@@ -1,6 +1,8 @@
+import Color from 'color';
+import { IProfiles } from 'src/stores/basic.interface';
 import React from 'react';
+import { socialIcons } from 'src/helpers/icons';
 import styled from '@emotion/styled';
-import Color from 'color';
 
 const SectionHolder = styled.div`
   border: 1px solid ${(props) => Color(props.theme.highlighterColor).alpha(0.75).toString()};
@@ -10,29 +12,61 @@ const SectionHolder = styled.div`
 
   .header {
     position: absolute;
-    top: 0px;
+    top: 0;
     transform: translate(0, -50%);
     background: white;
     padding: 0 5px;
     font-weight: bold;
     color: ${(props) => props.theme.titleColor};
   }
+
+  .social-icons {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    transform: translate(0, -50%);
+    color: ${(props) => props.theme.titleColor};
+  }
 `;
 
+function SocialIcons({ profiles }: { profiles: IProfiles[] }) {
+  return (
+    <div className="social-icons flex">
+      {profiles.map((profile) => {
+        const Icon = socialIcons.get(profile.network);
+
+        return (
+          Icon &&
+          profile.url && (
+            <a href={profile.url} target="blank" className="ml-2" key={profile.network}>
+              <Icon className="h-5 w-5 bg-white" />
+            </a>
+          )
+        );
+      })}
+    </div>
+  );
+}
+
 export function Section({
   title,
   children,
   titleClassname,
+  profiles,
 }: {
   title: string;
   children: React.ReactNode;
   titleClassname?: string;
+  profiles?: IProfiles[];
 }) {
   return (
     <SectionHolder>
       <div className="header flex justify-center items-center gap-1">
         <span className={titleClassname ? titleClassname : ''}>{title}</span>
       </div>
+
+      {profiles && <SocialIcons profiles={profiles} />}
+
       {children}
     </SectionHolder>
   );