update 4 files and delete 4 files

src/Views/Home/Main/index.js

@@ -0,0 +1,56 @@
+import React from "react";
+
+import { connect } from "react-redux";
+
+import Code from "../../../components/Code";
+
+function Main({ activeComponent }) {
+  return (
+    <div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200">
+      <header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header>
+      <section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col">
+        <h1 className="font-sansbold text-3xl text-left">
+          {activeComponent?.content?.name}
+        </h1>
+        <span className="font-sansbold text-xs mb-10 text-left block">
+          {activeComponent?.name && `Designed by: ${activeComponent?.author}`}
+        </span>
+        {activeComponent?.content?.component}
+        {activeComponent?.content?.code && (
+          <Code code={activeComponent?.content?.code} />
+        )}
+        {/* <h2>Props</h2> */}
+        {activeComponent?.props?.length > 0 && (
+          <table className="w-full" style={{ direction: "ltr" }}>
+            <thead>
+              <tr>
+                <th className="font-sansbold text-lg">Name</th>
+                <th className="font-sansbold text-lg">Type</th>
+                <th className="font-sansbold text-lg">Required</th>
+                <th className="font-sansbold text-lg">Default value</th>
+                <th className="font-sansbold text-lg">Description</th>
+              </tr>
+            </thead>
+            <tbody className="w-full divided divide-y">
+              {activeComponent?.props?.map((prop, index) => (
+                <tr key={index} className="">
+                  <td className="py-3 text-center">{prop.name}</td>
+                  <td className="py-3 text-center">{prop.type}</td>
+                  <td className="py-3 text-center">{prop.required}</td>
+                  <td className="py-3 text-center">{prop.defaultValue}</td>
+                  <td className="py-3 text-center">{prop.description}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </section>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  activeComponent: state.components.activeComponent,
+});
+
+export default connect(mapStateToProps, {})(Main);

src/Views/Home/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+import Sidebar from "./Sidebar";
+import Main from "./Main";
+
+function Home() {
+  return (
+    <div className="flex lg:w-full lg:flex-col lg:h-screen lg:overflow-hidden">
+      <div className="lg:w-full h-full lg:flex lg:flex-row">
+        <Main />
+        <Sidebar />
+      </div>
+    </div>
+  );
+}
+
+export default Home;