update create button to ddl

packages/round-manager/src/features/common/CreateDropdown.tsx

@@ -0,0 +1,79 @@
+import { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { Link } from "react-router-dom";
+import { getChainById, stringToBlobUrl } from "common";
+import { ChevronDownIcon } from "@heroicons/react/solid";
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export type CreateDropdownProps = {
+  chainId: number;
+  roundId: string;
+  name: string;
+  link: string;
+  customClasses?: string;
+};
+
+export default function CreateDropdown(props: {
+  actions?: CreateDropdownProps[];
+}) {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="inline-flex w-full justify-center gap-x-1.5 bg-transparent px-3 py-2 text-mono rounded-lg bg-yellow-100  text-sm text-gray-500">
+          {/* <Link to="/program/create" data-testid={"program-create"}>
+            <Button
+              type="button"
+              className="inline-flex items-center px-4 py-2 shadow-sm text-xs text-mono rounded bg-yellow-100 text-gray-500"
+              data-testid={"create-program"}
+            >
+              
+            </Button>
+          </Link> */}
+          Create
+          <ChevronDownIcon className="h-5 w-5 ml-2" aria-hidden="true" />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute cursor-pointer right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="py-1">
+            {props.actions?.map((action: CreateDropdownProps) => {
+              return (
+                <Menu.Item key={`${action.chainId}-${action.roundId}`}>
+                  {({ active }) => (
+                    <div
+                      className={classNames(
+                        "flex flex-row justify-end text-gray-800 px-4 py-2 text-sm",
+                        active ? "hover:bg-gray-100" : ""
+                      )}
+                    >
+                      <Link
+                        to={action.link}
+                        className={classNames(
+                          `font-sans text-right ${action.customClasses}`
+                        )}
+                      >
+                        {action.name}
+                      </Link>
+                    </div>
+                  )}
+                </Menu.Item>
+              );
+            })}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

packages/round-manager/src/features/common/Navbar.tsx

@@ -4,6 +4,7 @@ import { ReactComponent as ManagerLogoDark } from "../../assets/manager-logo-dar
 import { ReactComponent as GitcoinLogoDark } from "../../assets/gitcoin-logo-dark.svg";
 import { Button } from "common/src/styles";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import CreateDropdown from "./CreateDropdown";
 
 export interface NavbarProps {
   programCta?: boolean;
@@ -31,19 +32,23 @@ export default function Navbar({ programCta: programCta = true }: NavbarProps) {
             <div className="flex items-center gap-4">
               <div className="flex-shrink-0">
                 {programCta && (
-                  <Link to="/program/create" data-testid={"program-create"}>
-                    <Button
-                      type="button"
-                      className="inline-flex items-center px-4 py-2 shadow-sm text-xs text-mono rounded bg-yellow-100 text-gray-500"
-                      data-testid={"create-program"}
-                    >
-                      Create
-                      <ChevronDownIcon
-                        className="h-5 w-5 ml-2"
-                        aria-hidden="true"
-                      />
-                    </Button>
-                  </Link>
+                  <CreateDropdown
+                    actions={[
+                      {
+                        chainId: 1,
+                        roundId: "1",
+                        name: "Create a new program",
+                        link: "/program/create",
+                      },
+                      {
+                        chainId: 1,
+                        roundId: "2",
+                        name: "Create a new round",
+                        // todo: this route does not exist
+                        link: "/round/create",
+                      },
+                    ]}
+                  />
                 )}
               </div>
               <div