chore: add user detail page

web/src/components/common/Dropdown.tsx

@@ -1,16 +1,16 @@
 import { ReactNode, useEffect, useRef } from "react";
 import useToggle from "../../hooks/useToggle";
 import Icon from "../Icon";
-import "../../less/common/dropdown.less";
 
 interface Props {
   trigger?: ReactNode;
   actions?: ReactNode;
   className?: string;
+  actionsClassName?: string;
 }
 
 const Dropdown: React.FC<Props> = (props: Props) => {
-  const { trigger, actions, className } = props;
+  const { trigger, actions, className, actionsClassName } = props;
   const [dropdownStatus, toggleDropdownStatus] = useToggle(false);
   const dropdownWrapperRef = useRef<HTMLDivElement>(null);
 
@@ -29,15 +29,25 @@ const Dropdown: React.FC<Props> = (props: Props) => {
   }, [dropdownStatus]);
 
   return (
-    <div ref={dropdownWrapperRef} className={`dropdown-wrapper ${className ?? ""}`} onClick={() => toggleDropdownStatus()}>
+    <div
+      ref={dropdownWrapperRef}
+      className={`relative flex flex-col justify-start items-start select-none ${className ?? ""}`}
+      onClick={() => toggleDropdownStatus()}
+    >
       {trigger ? (
         trigger
       ) : (
-        <span className="trigger-button">
-          <Icon.MoreHorizontal className="icon-img" />
+        <span className="flex flex-row justify-center items-center border p-1 rounded shadow text-gray-600 cursor-pointer hover:opacity-80">
+          <Icon.MoreHorizontal className="w-4 h-auto" />
         </span>
       )}
-      <div className={`action-buttons-container ${dropdownStatus ? "" : "!hidden"}`}>{actions}</div>
+      <div
+        className={`w-auto mt-1 absolute top-full right-0 flex flex-col justify-start items-start bg-white z-1 border p-1 rounded-md shadow ${
+          actionsClassName ?? ""
+        } ${dropdownStatus ? "" : "!hidden"}`}
+      >
+        {actions}
+      </div>
     </div>
   );
 };

web/src/components/common/Selector.tsx

@@ -1,95 +0,0 @@
-import { memo, useEffect, useRef } from "react";
-import useToggle from "../../hooks/useToggle";
-import Icon from "../Icon";
-import "../../less/common/selector.less";
-
-interface SelectorItem {
-  text: string;
-  value: string;
-}
-
-interface Props {
-  className?: string;
-  value: string;
-  dataSource: SelectorItem[];
-  handleValueChanged?: (value: string) => void;
-}
-
-const nullItem = {
-  text: "Select",
-  value: "",
-};
-
-const Selector: React.FC<Props> = (props: Props) => {
-  const { className, dataSource, handleValueChanged, value } = props;
-  const [showSelector, toggleSelectorStatus] = useToggle(false);
-
-  const seletorElRef = useRef<HTMLDivElement>(null);
-
-  let currentItem = nullItem;
-  for (const d of dataSource) {
-    if (d.value === value) {
-      currentItem = d;
-      break;
-    }
-  }
-
-  useEffect(() => {
-    if (showSelector) {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (!seletorElRef.current?.contains(event.target as Node)) {
-          toggleSelectorStatus(false);
-        }
-      };
-      window.addEventListener("click", handleClickOutside, {
-        capture: true,
-        once: true,
-      });
-    }
-  }, [showSelector]);
-
-  const handleItemClick = (item: SelectorItem) => {
-    if (handleValueChanged) {
-      handleValueChanged(item.value);
-    }
-    toggleSelectorStatus(false);
-  };
-
-  const handleCurrentValueClick = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    toggleSelectorStatus();
-  };
-
-  return (
-    <div className={`selector-wrapper ${className ?? ""}`} ref={seletorElRef}>
-      <div className={`current-value-container ${showSelector ? "active" : ""}`} onClick={handleCurrentValueClick}>
-        <span className="value-text">{currentItem.text}</span>
-        <span className="arrow-text">
-          <Icon.ChevronDown className="icon-img" />
-        </span>
-      </div>
-
-      <div className={`items-wrapper ${showSelector ? "" : "!hidden"}`}>
-        {dataSource.length > 0 ? (
-          dataSource.map((d) => {
-            return (
-              <div
-                className={`item-container ${d.value === value ? "selected" : ""}`}
-                key={d.value}
-                onClick={() => {
-                  handleItemClick(d);
-                }}
-              >
-                {d.text}
-              </div>
-            );
-          })
-        ) : (
-          <p className="tip-text">Null</p>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default memo(Selector);