- memoize all components

- implement metadata context

src/components/builder/right/RightNavbar.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import { MdPerson } from 'react-icons/md';
+import React, { memo } from 'react';
+import sections from '../../../data/rightSections';
+import SectionIcon from '../../shared/SectionIcon';
 import styles from './RightNavbar.module.css';
 import SyncIndicator from './SyncIndicator';
 
 const RightNavbar = () => {
   return (
     <div className={styles.container}>
-      <div className="grid grid-cols-1 gap-6">
-        <MdPerson
-          className="text-secondary-dark hover:text-primary"
-          size="20px"
-        />
+      <div className="grid grid-cols-1 gap-8">
+        {sections.map((x) => (
+          <SectionIcon key={x.id} section={x} containerId="RightSidebar" />
+        ))}
       </div>
 
       <hr className="mt-auto my-6" />
@@ -20,4 +20,4 @@ const RightNavbar = () => {
   );
 };
 
-export default RightNavbar;
+export default memo(RightNavbar);

src/components/builder/right/RightSidebar.js

@@ -1,14 +1,35 @@
-import React from 'react';
+import React, { Fragment, memo } from 'react';
+import { Element } from 'react-scroll';
+import sections from '../../../data/rightSections';
 import Layout from '../sections/Layout';
 import RightNavbar from './RightNavbar';
 import styles from './RightSidebar.module.css';
 
+const getComponent = (id) => {
+  switch (id) {
+    case 'layout':
+      return Layout;
+    default:
+      throw new Error();
+  }
+};
+
 const RightSidebar = () => {
   return (
     <div className="flex">
-      <div className={styles.container}>
-        <Layout />
-        <hr />
+      <div id="RightSidebar" className={styles.container}>
+        {sections.map(({ id, name, event }) => {
+          const Component = getComponent(id);
+
+          return (
+            <Fragment key={id}>
+              <Element name={id}>
+                <Component id={id} name={name} event={event} />
+              </Element>
+              <hr />
+            </Fragment>
+          );
+        })}
       </div>
 
       <RightNavbar />
@@ -16,4 +37,4 @@ const RightSidebar = () => {
   );
 };
 
-export default RightSidebar;
+export default memo(RightSidebar);

src/components/builder/right/SyncIndicator.js

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import { MdSync, MdSyncDisabled } from 'react-icons/md';
 import DatabaseContext from '../../../contexts/DatabaseContext';
 
@@ -17,4 +17,4 @@ const SyncIndicator = () => {
   );
 };
 
-export default SyncIndicator;
+export default memo(SyncIndicator);