- 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);