chore: update dropdown component

web/src/components/Header.tsx

@@ -1,13 +1,12 @@
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
 import { userService } from "../services";
-import useToggle from "../hooks/useToggle";
 import Icon from "./Icon";
+import Dropdown from "./common/Dropdown";
 
 const Header: React.FC = () => {
   const navigate = useNavigate();
   const { user } = useAppSelector((state) => state.user);
-  const [showDropdown, toggleShowDropdown] = useToggle(false);
 
   const handleSignOutButtonClick = async () => {
     await userService.doSignOut();
@@ -19,19 +18,21 @@ const Header: React.FC = () => {
       <div className="w-full max-w-4xl mx-auto px-3 py-4 flex flex-row justify-between items-center">
         <span className="text-xl font-mono font-medium">Corgi</span>
         <div className="relative">
-          <div className="flex flex-row justify-end items-center" onClick={() => toggleShowDropdown()}>
-            <span>{user?.name}</span>
-            <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
-          </div>
-          <div
-            className={`bg-white flex flex-col justify-start items-start p-1 w-32 absolute top-8 right-0 shadow rounded ${
-              showDropdown ? "" : "hidden"
-            }`}
-          >
-            <span className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100" onClick={() => handleSignOutButtonClick()}>
-              Sign out
-            </span>
-          </div>
+          <Dropdown
+            trigger={
+              <div className="flex flex-row justify-end items-center cursor-pointer">
+                <span>{user?.name}</span>
+                <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
+              </div>
+            }
+            actions={
+              <>
+                <span className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100" onClick={() => handleSignOutButtonClick()}>
+                  Sign out
+                </span>
+              </>
+            }
+          ></Dropdown>
         </div>
       </div>
     </div>

web/src/components/ShortcutListView.tsx

@@ -1,6 +1,7 @@
 import { shortcutService } from "../services";
 import Dropdown from "./common/Dropdown";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
+import Icon from "./Icon";
 
 interface Props {
   workspaceId: WorkspaceId;
@@ -21,24 +22,30 @@ const ShortcutListView: React.FC<Props> = (props: Props) => {
           <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
             <div className="flex flex-col justify-start items-start">
               <span className="text-lg font-medium">{shortcut.name}</span>
-              <span className="text-base text-gray-600">{shortcut.link}</span>
+              <a className="text-base text-gray-600 flex flex-row cursor-pointer hover:underline" target="blank" href={shortcut.link}>
+                {shortcut.link} <Icon.ExternalLink className="w-4 h-auto ml-1" />
+              </a>
             </div>
-            <Dropdown>
-              <span
-                className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
-                onClick={() => showCreateShortcutDialog(workspaceId, shortcut.id)}
-              >
-                Edit
-              </span>
-              <span
-                className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
-                onClick={() => {
-                  handleDeleteShortcutButtonClick(shortcut);
-                }}
-              >
-                Delete
-              </span>
-            </Dropdown>
+            <Dropdown
+              actions={
+                <>
+                  <span
+                    className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
+                    onClick={() => showCreateShortcutDialog(workspaceId, shortcut.id)}
+                  >
+                    Edit
+                  </span>
+                  <span
+                    className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
+                    onClick={() => {
+                      handleDeleteShortcutButtonClick(shortcut);
+                    }}
+                  >
+                    Delete
+                  </span>
+                </>
+              }
+            ></Dropdown>
           </div>
         );
       })}

web/src/components/WorkspaceListView.tsx

@@ -1,6 +1,5 @@
 import { useNavigate } from "react-router-dom";
 import { workspaceService } from "../services";
-import workspace from "../store/modules/workspace";
 import Dropdown from "./common/Dropdown";
 import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
 
@@ -31,22 +30,26 @@ const WorkspaceListView: React.FC<Props> = (props: Props) => {
               </span>
               <span className="text-base text-gray-600">{workspace.description}</span>
             </div>
-            <Dropdown>
-              <span
-                className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
-                onClick={() => showCreateWorkspaceDialog(workspace.id)}
-              >
-                Edit
-              </span>
-              <span
-                className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
-                onClick={() => {
-                  handleDeleteWorkspaceButtonClick(workspace);
-                }}
-              >
-                Delete
-              </span>
-            </Dropdown>
+            <Dropdown
+              actions={
+                <>
+                  <span
+                    className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
+                    onClick={() => showCreateWorkspaceDialog(workspace.id)}
+                  >
+                    Edit
+                  </span>
+                  <span
+                    className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
+                    onClick={() => {
+                      handleDeleteWorkspaceButtonClick(workspace);
+                    }}
+                  >
+                    Delete
+                  </span>
+                </>
+              }
+            ></Dropdown>
           </div>
         );
       })}

web/src/components/common/Dropdown.tsx

@@ -3,13 +3,14 @@ import useToggle from "../../hooks/useToggle";
 import Icon from "../Icon";
 import "../../less/common/dropdown.less";
 
-interface DropdownProps {
-  children?: ReactNode;
+interface Props {
+  trigger?: ReactNode;
+  actions?: ReactNode;
   className?: string;
 }
 
-const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
-  const { children, className } = props;
+const Dropdown: React.FC<Props> = (props: Props) => {
+  const { trigger, actions, className } = props;
   const [dropdownStatus, toggleDropdownStatus] = useToggle(false);
   const dropdownWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -29,10 +30,14 @@ const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
 
   return (
     <div ref={dropdownWrapperRef} className={`dropdown-wrapper ${className ?? ""}`} onClick={() => toggleDropdownStatus()}>
-      <span className="trigger-button">
-        <Icon.MoreHorizontal className="icon-img" />
-      </span>
-      <div className={`action-buttons-container ${dropdownStatus ? "" : "!hidden"}`}>{children}</div>
+      {trigger ? (
+        trigger
+      ) : (
+        <span className="trigger-button">
+          <Icon.MoreHorizontal className="icon-img" />
+        </span>
+      )}
+      <div className={`action-buttons-container ${dropdownStatus ? "" : "!hidden"}`}>{actions}</div>
     </div>
   );
 };