feat: create and delete api keys

apps/web/src/components/Input.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import ContentEditable from "react-contenteditable";
+import { HiOutlineEye, HiOutlineEyeSlash } from "react-icons/hi2";
 import { twMerge } from "tailwind-merge";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -14,6 +15,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => void;
   onKeyDown?: (e: React.KeyboardEvent) => void;
+  type?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -27,10 +29,13 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       onKeyDown,
       iconRight,
       className,
+      type = "text",
       ...props
     },
     ref,
   ) => {
+    const [showPassword, setShowPassword] = useState(false);
+
     if (contentEditable) {
       return (
         <ContentEditable
@@ -56,7 +61,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           )}
           <input
             ref={ref}
+            value={value}
             onChange={onChange}
+            type={type === "password" && showPassword ? "text" : type}
             className={twMerge(
               "block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-sm shadow-sm ring-1 ring-inset ring-light-600 placeholder:text-dark-800 focus:ring-2 focus:ring-inset focus:ring-light-700 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:leading-6",
               prefix && "rounded-l-none",
@@ -64,7 +71,21 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             )}
             {...props}
           />
-          {iconRight && (
+          {type === "password" && (
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 -translate-y-1/2 bg-light-50 pl-1 text-xs text-light-900 dark:bg-dark-200 dark:text-dark-900"
+              tabIndex={-1}
+              onClick={() => setShowPassword((v) => !v)}
+            >
+              {showPassword ? (
+                <HiOutlineEyeSlash className="h-4 w-4" />
+              ) : (
+                <HiOutlineEye className="h-4 w-4" />
+              )}
+            </button>
+          )}
+          {iconRight && type !== "password" && (
             <div className="absolute right-3 top-1/2 -translate-y-1/2">
               {iconRight}
             </div>