botway(core): start building bot home page 🏗️

core/app/project/[id]/node.tsx

@@ -0,0 +1,17 @@
+import React, { memo } from "react";
+
+const Node = ({ data }: any) => {
+  return (
+    <div className="px-4 py-2 rounded-xl bg-secondary border-2 border-dashed border-gray-800">
+      <div className="flex">
+        <div className="rounded-full w-12 h-12 flex justify-center items-center bg-gray-800"></div>
+        <div className="ml-2">
+          <div className="text-lg text-white font-bold">{data.name}</div>
+          {/* <div className="text-gray-400"></div> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(Node);

core/app/project/[id]/page.tsx

@@ -10,11 +10,41 @@ import {
   QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
+import ReactFlow, { useNodesState } from "reactflow";
+import Node from "./node";
 
 export const revalidate = 0;
 
 const queryClient = new QueryClient();
 
+const nodeTypes = {
+  custom: Node,
+};
+
+const initNodes = [
+  {
+    id: "1",
+    type: "custom",
+    data: { name: "Test1" },
+    position: { x: 0, y: 50 },
+  },
+];
+
+const Flow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      onNodesChange={onNodesChange}
+      nodeTypes={nodeTypes}
+      fitView
+      nodesDraggable={false}
+      className=""
+    />
+  );
+};
+
 const Project = ({ user, projectId }: any) => {
   const fetchProject = async () => {
     const { data: project } = await supabase
@@ -47,8 +77,11 @@ const Project = ({ user, projectId }: any) => {
           projectId={projectId}
           projectName={project?.name}
           projectRWID={project?.railway_project_id}
+          noMargin={true}
         >
-          <div className="w-[80vw] h-screen pr-10"></div>
+          <div className="w-screen h-screen">
+            <Flow />
+          </div>
         </ProjectLayout>
       )}
     </>

core/components/Layout/project.tsx

@@ -23,6 +23,7 @@ export const ProjectLayout = ({
   children,
   grid,
   projectRWID,
+  noMargin,
 }: any) => {
   const router = useRouter();
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -261,7 +262,11 @@ export const ProjectLayout = ({
                 grid ? "bg-grid-gray-800/[0.4]" : ""
               )}
             >
-              <div className="mx-auto w-full max-w-7xl space-y-16">
+              <div
+                className={`${
+                  !noMargin ? "mx-auto" : ""
+                } w-full max-w-7xl space-y-16`}
+              >
                 {children}
               </div>
             </main>