feat: 🎸 read social data from data.json

src/App.jsx

@@ -8,12 +8,12 @@ import './App.css';
 import data from './static/data.json';
 
 function App() {
-  const { name, title, experiences, education, personalProjects, publications } = data;
+  const { name, title, social, experiences, education, personalProjects, publications } = data;
 
   return (
     <>
       <section className="sheet padding-10mm">
-        <Header name={name} title={title} />
+        <Header name={name} title={title} social={social} />
         <ExperienceList title="Experience" data={experiences} />
         <ExperienceList title="Education" dateFormat="year" data={education} />
       </section>

src/components/SocialLinks.jsx

@@ -17,37 +17,19 @@ const StyledSocialLinks = styled.div`
   }
 `;
 
-const socialData = [
-  {
-    id: 'github',
-    image: <FiGithub />,
-    text: '/umutcanbolat',
-    href: 'https://github.com/umutcanbolat',
-  },
-  {
-    id: 'linkedin',
-    image: <FaLinkedinIn />,
-    text: '/umutcanbolat',
-    href: 'https://www.linkedin.com/in/umutcanbolat',
-  },
-  {
-    id: 'web',
-    image: <VscGlobe />,
-    text: 'umutcanbolat.com',
-    href: 'https://www.umutcanbolat.com',
-  },
-  {
-    id: 'email',
-    image: <FiMail />,
-    text: '[email protected]',
-    href: 'mailto:[email protected]',
-  },
-];
+const socialIcons = {
+  github: <FiGithub />,
+  linkedin: <FaLinkedinIn />,
+  web: <VscGlobe />,
+  email: <FiMail />,
+};
 
-export default function SocialLinks() {
-  const links = socialData.map(({ id, image, text, href }) => (
+const getImageComponent = (socialId) => socialIcons[socialId] || socialIcons.web;
+
+export default function SocialLinks({ data }) {
+  const links = data.map(({ id, text, href }) => (
     <div key={id} className="item">
-      <SocialItem image={image} text={text} href={href} />
+      <SocialItem image={getImageComponent(id)} text={text} href={href} />
     </div>
   ));
   return <StyledSocialLinks>{links}</StyledSocialLinks>;

src/sections/Header.jsx

@@ -19,12 +19,12 @@ const StyledHeader = styled.div`
   }
 `;
 
-export default function Header({ name, title }) {
+export default function Header({ name, title, social }) {
   return (
     <StyledHeader>
       <h1>{name}</h1>
       <p>{title}</p>
-      <SocialLinks />
+      <SocialLinks data={social} />
     </StyledHeader>
   );
 }

src/static/data.json

@@ -1,6 +1,28 @@
 {
   "name": "Umut Canbolat",
   "title": "Full-Stack Software Engineer",
+  "social": [
+    {
+      "id": "github",
+      "text": "/umutcanbolat",
+      "href": "https://github.com/umutcanbolat"
+    },
+    {
+      "id": "linkedin",
+      "text": "/umutcanbolat",
+      "href": "https://www.linkedin.com/in/umutcanbolat"
+    },
+    {
+      "id": "web",
+      "text": "umutcanbolat.com",
+      "href": "https://www.umutcanbolat.com"
+    },
+    {
+      "id": "email",
+      "text": "[email protected]",
+      "href": "mailto:[email protected]"
+    }
+  ],
   "experiences": [
     {
       "id": 1,