From 6240991e0c29dcff852511c9d67f4dcc8d70578e Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Tue, 29 Aug 2023 18:47:36 -0300
Subject: [PATCH] Feat: Add Dropdown Button to main page

---
 .../components/DropdownButtonComponent/index.tsx    | 11 ++++++++---
 src/frontend/src/pages/MainPage/index.tsx           | 13 ++++++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/DropdownButtonComponent/index.tsx b/src/frontend/src/components/DropdownButtonComponent/index.tsx
index 20c956365..20865e12d 100644
--- a/src/frontend/src/components/DropdownButtonComponent/index.tsx
+++ b/src/frontend/src/components/DropdownButtonComponent/index.tsx
@@ -37,9 +37,14 @@ export default function DropdownButton({
       </div>
       {showOptions && (
         <div className="absolute top-10 w-full">
-          {options.map((optionName) => (
-            <Button className="w-full" variant="primary">
-              {optionName}
+          {options.map(({ name, onBtnClick }) => (
+            <Button
+              className="w-full"
+              variant="primary"
+              onClick={onBtnClick}
+              key={name}
+            >
+              {name}
             </Button>
           ))}
         </div>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 67412401a..007298f29 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -6,6 +6,7 @@ import Header from "../../components/headerComponent";
 import { Button } from "../../components/ui/button";
 import { USER_PROJECTS_HEADER } from "../../constants/constants";
 import { TabsContext } from "../../contexts/tabsContext";
+import DropdownButton from "../../components/DropdownButtonComponent";
 export default function HomePage(): JSX.Element {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
@@ -45,17 +46,15 @@ export default function HomePage(): JSX.Element {
               <IconComponent name="Upload" className="main-page-nav-button" />
               Upload Collection
             </Button>
-            <Button
-              variant="primary"
-              onClick={() => {
+            <DropdownButton
+              firstButtonName="New Project"
+              onFirstBtnClick={() => {
                 addFlow(null!, true).then((id) => {
                   navigate("/flow/" + id);
                 });
               }}
-            >
-              <IconComponent name="Plus" className="main-page-nav-button" />
-              New Project
-            </Button>
+              options={[{name: "yesyes", onBtnClick: () => console.log('dips')}, {name: "dips", onBtnClick: () => console.log('yesyes')}]}
+            />
           </div>
         </div>
         <span className="main-page-description-text">