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,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="align-center flex w-full justify-center gap-1 ">
-            <div className="grid w-full gap-4 text-muted-foreground">
+            <span className="text-muted-foreground">
-              Flows and components can be created using Langflow.
+              This folder is empty. New?
-            </div>
+            </span>
-            <div className="align-center flex w-full justify-center gap-1 ">
+            <span className="transition-colors hover:text-muted-foreground">
-              <span className="text-muted-foreground">New?</span>
+              <NewFlowModal open={openModal} setOpen={setOpenModal} />
-              <span className="transition-colors hover:text-muted-foreground">
+              <button
-                <button
+                onClick={() => {
-                  onClick={() => {
+                  setOpenModal(true);
-                    addFlow(true).then((id) => {
+                }}
-                      navigate("/flow/" + id);
+                className="underline"
-                    });
+              >
-                  }}
+                Start Here
-                  className="underline"
+              </button>
-                >
+            </span>
-                  Start Here
+            <span className="animate-pulse">🚀</span>
-                </button>
-                .
-              </span>
-              <span className="animate-pulse">🚀</span>
-            </div>
           </div>
         </div>
       </div>