- refactor sections

- combine resume and metadata contexts

src/components/builder/left/LeftNavbar.js

@@ -14,7 +14,7 @@ const LeftNavbar = () => (
 
     <hr className="my-6" />
 
-    <div className="grid grid-cols-1 gap-5 text-secondary-dark">
+    <div className="grid grid-cols-1 gap-4 text-secondary-dark">
       {sections.map((x) => (
         <SectionIcon
           key={x.id}

src/components/builder/left/LeftSidebar.js

@@ -1,17 +1,17 @@
 import React, { Fragment, memo } from 'react';
 import { Element } from 'react-scroll';
 import sections from '../../../data/leftSections';
-import Awards from '../sections/Awards';
-import Certifications from '../sections/Certifications';
-import Education from '../sections/Education';
-import Hobbies from '../sections/Hobbies';
-import Languages from '../sections/Languages';
-import Objective from '../sections/Objective';
-import Profile from '../sections/Profile';
-import References from '../sections/References';
-import Skills from '../sections/Skills';
-import Social from '../sections/Social';
-import Work from '../sections/Work';
+import Awards from './sections/Awards';
+import Certifications from './sections/Certifications';
+import Education from './sections/Education';
+import Hobbies from './sections/Hobbies';
+import Languages from './sections/Languages';
+import Objective from './sections/Objective';
+import Profile from './sections/Profile';
+import References from './sections/References';
+import Skills from './sections/Skills';
+import Social from './sections/Social';
+import Work from './sections/Work';
 import LeftNavbar from './LeftNavbar';
 import styles from './LeftSidebar.module.css';
 

src/components/builder/left/sections/Awards.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const Awards = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        path={path}
+        event={event}
+        titlePath="title"
+        subtitlePath="awarder"
+        textPath="summary"
+      />
+    </section>
+  );
+};
+
+export default memo(Awards);

src/components/builder/left/sections/Certifications.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const Certifications = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        path={path}
+        event={event}
+        titlePath="title"
+        subtitlePath="issuer"
+        textPath="summary"
+      />
+    </section>
+  );
+};
+
+export default memo(Certifications);

src/components/builder/left/sections/Education.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const Education = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        hasDate
+        path={path}
+        event={event}
+        titlePath="institution"
+        textPath="field"
+      />
+    </section>
+  );
+};
+
+export default memo(Education);

src/components/builder/left/sections/Hobbies.js

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const Hobbies = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List path={path} event={event} titlePath="name" />
+    </section>
+  );
+};
+
+export default memo(Hobbies);

src/components/builder/left/sections/Languages.js

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const Languages = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List path={path} event={event} titlePath="name" subtitlePath="fluency" />
+    </section>
+  );
+};
+
+export default memo(Languages);

src/components/builder/left/sections/Objective.js

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
+
+const Objective = () => {
+  return (
+    <section>
+      <Heading>Objective</Heading>
+
+      <Input type="textarea" label="Objective" path="objective" />
+    </section>
+  );
+};
+
+export default memo(Objective);

src/components/builder/left/sections/Profile.js

@@ -0,0 +1,47 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import Input from '../../../shared/Input';
+import PhotoUpload from '../../../shared/PhotoUpload';
+
+const Profile = () => {
+  return (
+    <section>
+      <Heading>Profile</Heading>
+
+      <PhotoUpload />
+
+      <div className="grid grid-cols-2 gap-6">
+        <Input name="firstName" label="First Name" path="profile.firstName" />
+        <Input name="lastName" label="Last Name" path="profile.lastName" />
+      </div>
+
+      <Input name="subtitle" label="Subtitle" path="profile.subtitle" />
+
+      <hr />
+
+      <Input
+        name="addressLine1"
+        label="Address Line 1"
+        path="profile.address.line1"
+      />
+      <Input
+        name="addressLine2"
+        label="Address Line 2"
+        path="profile.address.line2"
+      />
+
+      <div className="grid grid-cols-2 gap-6">
+        <Input name="city" label="City" path="profile.address.city" />
+        <Input name="pincode" label="Pincode" path="profile.address.pincode" />
+      </div>
+
+      <hr />
+
+      <Input name="phone" label="Phone Number" path="profile.phone" />
+      <Input name="website" label="Website" path="profile.website" />
+      <Input name="email" label="Email Address" path="profile.email" />
+    </section>
+  );
+};
+
+export default memo(Profile);

src/components/builder/left/sections/References.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const References = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        path={path}
+        event={event}
+        titlePath="name"
+        subtitlePath="position"
+        textPath="summary"
+      />
+    </section>
+  );
+};
+
+export default memo(References);

src/components/builder/left/sections/Skills.js

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const Skills = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List path={path} event={event} titlePath="name" subtitlePath="level" />
+    </section>
+  );
+};
+
+export default memo(Skills);

src/components/builder/left/sections/Social.js

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const Social = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        path={path}
+        event={event}
+        titlePath="network"
+        subtitlePath="username"
+      />
+    </section>
+  );
+};
+
+export default memo(Social);

src/components/builder/left/sections/Work.js

@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import Heading from '../../../shared/Heading';
+import List from '../../lists/List';
+
+const Work = ({ id, name, event }) => {
+  const path = `${id}.items`;
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        hasDate
+        path={path}
+        event={event}
+        titlePath="company"
+        textPath="summary"
+      />
+    </section>
+  );
+};
+
+export default memo(Work);