Changed empty component to open New Project modal

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,34 +9,31 @@ 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="text-muted-foreground">
+              This folder is empty. New?
+            </span>
             <span className="transition-colors hover:text-muted-foreground">
+              <NewFlowModal open={openModal} setOpen={setOpenModal} />
               <button
                 onClick={() => {
-                    addFlow(true).then((id) => {
+                  setOpenModal(true);
-                      navigate("/flow/" + id);
-                    });
                 }}
                 className="underline"
               >
                 Start Here
               </button>
-                .
             </span>
             <span className="animate-pulse">🚀</span>
           </div>
         </div>
       </div>
-      </div>
     </>
   );
 };