From a119c3777a55037b985574a582287a83b66999fd Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 30 May 2024 20:15:48 -0300
Subject: [PATCH] Changed empty component to open New Project modal

---
 .../components/emptyComponent/index.tsx       | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx b/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx
index 0655b6f47..fdcc7291a 100644
--- a/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx
@@ -1,5 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import NewFlowModal from "../../../../modals/newFlowModal";
+import { useState } from "react";
 
 type EmptyComponentProps = {};
 
@@ -7,31 +9,28 @@ const EmptyComponent = ({}: EmptyComponentProps) => {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const navigate = useNavigate();
 
+  const [openModal, setOpenModal] = useState(false);
+
   return (
     <>
       <div className="mt-6 flex w-full items-center justify-center text-center">
         <div className="flex-max-width h-full flex-col">
-          <div className="flex w-full flex-col gap-4">
-            <div className="grid w-full gap-4 text-muted-foreground">
-              Flows and components can be created using Langflow.
-            </div>
-            <div className="align-center flex w-full justify-center gap-1 ">
-              <span className="text-muted-foreground">New?</span>
-              <span className="transition-colors hover:text-muted-foreground">
-                <button
-                  onClick={() => {
-                    addFlow(true).then((id) => {
-                      navigate("/flow/" + id);
-                    });
-                  }}
-                  className="underline"
-                >
-                  Start Here
-                </button>
-                .
-              </span>
-              <span className="animate-pulse">🚀</span>
-            </div>
+          <div className="align-center flex w-full justify-center gap-1 ">
+            <span className="text-muted-foreground">
+              This folder is empty. New?
+            </span>
+            <span className="transition-colors hover:text-muted-foreground">
+              <NewFlowModal open={openModal} setOpen={setOpenModal} />
+              <button
+                onClick={() => {
+                  setOpenModal(true);
+                }}
+                className="underline"
+              >
+                Start Here
+              </button>
+            </span>
+            <span className="animate-pulse">🚀</span>
           </div>
         </div>
       </div>