Add InputHidden Component

设置面板默认隐藏 Token

components/ui/inputHidden/index.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import type { InputHTMLAttributes, MouseEvent, ReactElement } from "react";
+import { IconEye, IconEyeClose } from "~assets/icons";
+
+type InputHiddenProps = Partial<InputHTMLAttributes<HTMLInputElement>> & {
+  suffix?: ReactElement
+}
+
+function InputHidden(props: InputHiddenProps) {
+  const [type, setType] = useState<"text" | "password">("password");
+
+  const onSwitchType = (ev: MouseEvent) => {
+    ev.preventDefault();
+
+    setType(type === "text" ? "password" : "text");
+  }
+
+  return (
+    <div className="input-group">
+      <input type={type} placeholder="隐藏信息" {...props} />
+      {props.suffix && props.suffix}
+      <button className="btn primary" onClick={onSwitchType} title={type === "text" ? "隐藏" : "显示"}>
+        {type === "text" ? <IconEyeClose /> : <IconEye />}
+      </button>
+    </div>
+  );
+}
+
+export default InputHidden;