Dropdown has been modified - Button converted to Link

src/components/ContextMenu.tsx

@@ -0,0 +1,115 @@
+/* -------------------------------------------------------------------------- */
+/*                                   Imports                                  */
+/* -------------------------------------------------------------------------- */
+import React, { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { PropsPartion } from "./ContextMenuItem";
+import classNames from "classnames";
+import { ReactComponent as SelectIcon } from "assets/svg/select-arrow.svg";
+type ChildType = React.ReactElement<any & PropsPartion[]>;
+type ChildrenType = ChildType[] | ChildType;
+
+/* -------------------------------------------------------------------------- */
+/*                               Component props                              */
+/* -------------------------------------------------------------------------- */
+
+type MenuProps = {
+  emphasis?: "high" | "low";
+  disabled?: boolean;
+  className?: string | undefined;
+  button: React.ReactNode;
+  children: ChildrenType;
+};
+/* -------------------------------------------------------------------------- */
+/*                                Styles                                      */
+/* -------------------------------------------------------------------------- */
+
+const MenuButtonStyle = `
+inline-flex 
+justify-center w-full
+cursor-default    
+rounded
+border border-gray-100
+outline-8
+py-2
+px-2 
+text-base`;
+
+const MenuItemStyle = `
+absolute
+left-0 
+mt-2 w-60 
+origin-top-left 
+rounded 
+shadow-lg 
+focus:outline-none 
+py-2 px-4 sm:text-sm`;
+
+/* -------------------------------------------------------------------------- */
+/*                          Component implementation                          */
+/* -------------------------------------------------------------------------- */
+/**
+ *   Use width ContextMenuAction.tsx , for example:
+ *   <ContextMenu button="MyButton" emphasis="low/high">
+ *   <ContextMenuAction
+ *   caption="First Menu"
+ *   icon={icon}
+ *   action={() => alert('click')}
+ *   ></ContextMenuAction>
+ *   ...
+ *  </ContextMenu>
+ */
+export default function ContextMenu({
+  button,
+  children,
+  className,
+  emphasis = "low",
+}: MenuProps) {
+  return (
+    <Menu as="div" className="relative inline-block text-right">
+      {({ open }) => (
+        <>
+          <Menu.Button
+            className={classNames([
+              `${MenuButtonStyle}`,
+              {
+                "hover:bg-gray-100 font-bold uppercase": emphasis === "high",
+              },
+              className,
+            ])}
+          >
+            {button}
+            <SelectIcon
+              className={`${
+                open ? "rotate-180 transform" : "font-normal"
+              } my-2 mx-3 h-2 w-3 flex-center`}
+              aria-hidden="true"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            show={open}
+            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
+              static
+              className={classNames([
+                className,
+                `${MenuItemStyle}`,
+                { "ml-2": emphasis === "high" },
+              ])}
+            >
+              {children}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
+  );
+}

src/components/ContextMenuAction.tsx

@@ -0,0 +1,34 @@
+import classNames from "classnames";
+import React from "react";
+
+type Props = {
+  action: Function;
+  caption: string;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  className?: string | undefined;
+};
+
+export default function ContextMenuAction({
+  action,
+  caption,
+  disabled,
+  icon,
+  className,
+}: Props) {
+  return (
+    <a
+      href="#"
+      onClick={(e) => action(e)}
+      // disabled={disabled}
+      className={classNames([
+        "group flex px-2 rounded items-center text-base hover:bg-gray-100",
+        // { "opacity-50": disabled, "cursor-default": !disabled },
+        className,
+      ])}
+    >
+      {icon && <div className="mr-2 h-5 w-5">{icon}</div>}
+      <span className="px-2 py-2">{caption}</span>
+    </a>
+  );
+}