- implement tips on loading screen

- implement centralized sections
- removed react-spinner package

src/components/builder/left/LeftNavbar.js

@@ -1,8 +1,9 @@
 import { Link } from "gatsby";
 import React from "react";
-import { MdPerson } from "react-icons/md";
+import sections from "../../../data/leftSections";
 import Avatar from "../../shared/Avatar";
 import Logo from "../../shared/Logo";
+import SectionIcon from "../../shared/SectionIcon";
 import styles from "./LeftNavbar.module.css";
 
 const LeftNavbar = () => {
@@ -14,11 +15,10 @@ const LeftNavbar = () => {
 
       <hr className="my-6" />
 
-      <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} />
+        ))}
       </div>
 
       <hr className="mt-auto my-6" />

src/components/builder/left/LeftSidebar.js

@@ -1,5 +1,5 @@
-import React from "react";
-import Profile from "../sections/Profile";
+import React, { Fragment } from "react";
+import sections from "../../../data/leftSections";
 import LeftNavbar from "./LeftNavbar";
 import styles from "./LeftSidebar.module.css";
 
@@ -9,7 +9,12 @@ const LeftSidebar = () => {
       <LeftNavbar />
 
       <div className={styles.container}>
-        <Profile />
+        {sections.map(({ id, component: Component }) => (
+          <Fragment key={id}>
+            <Component />
+            <hr />
+          </Fragment>
+        ))}
       </div>
     </div>
   );

src/components/builder/left/LeftSidebar.module.css

@@ -1,5 +1,6 @@
 .container {
   z-index: 10;
   box-shadow: var(--left-shadow);
-  @apply w-full h-screen p-8;
+  @apply w-full h-screen overflow-scroll p-8;
+  @apply grid gap-6;
 }

src/components/builder/sections/SocialNetwork.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Heading from "../../shared/Heading";
+
+const SocialNetwork = () => {
+  return (
+    <section>
+      <Heading>Social Network</Heading>
+    </section>
+  );
+};
+
+export default SocialNetwork;