Feat: Add Dropdown Button to main page

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>

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">