feat: add copy text option to input fields.

src/components/UI/Generator.tsx

@@ -9,7 +9,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@components/UI/Select.tsx";
-import type { LucideIcon } from "lucide-react";
+
+export interface ActionButton {
+  text: string;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  variant: ButtonVariant;
+  className?: string;
+}[]
 
 export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   type: "text" | "password";
@@ -17,19 +23,12 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   value: string;
   id: string;
   variant: "default" | "invalid";
-  actionButtons: {
-    text: string;
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    variant: ButtonVariant;
-    className?: string;
-  }[];
+  actionButtons: ActionButton[];
   bits?: { text: string; value: string; key: string }[];
   selectChange: (event: string) => void;
-  inputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  action?: {
-    icon: LucideIcon;
-    onClick: () => void;
-  };
+  inputChange: (event: React.ChangeEventHandler<HTMLInputElement> | undefined) => void;
+  showPasswordToggle?: boolean;
+  showCopyButton?: boolean;
   disabled?: boolean;
 }
 
@@ -50,8 +49,9 @@ const Generator =
       ],
       selectChange,
       inputChange,
-      action,
       disabled,
+      showPasswordToggle,
+      showCopyButton,
       ...props
     }: GeneratorProps
   ) => {
@@ -78,27 +78,28 @@ const Generator =
           variant={variant}
           value={value}
           onChange={inputChange}
-          action={action}
           disabled={disabled}
           ref={inputRef}
+          showCopyButton={showCopyButton}
+          showPasswordToggle={showPasswordToggle}
         />
         <Select
           value={devicePSKBitCount?.toString()}
           onValueChange={(e) => selectChange(e)}
           disabled={disabled}
         >
-          <SelectTrigger>
+          <SelectTrigger className="w-36 ml-2">
             <SelectValue />
           </SelectTrigger>
-          <SelectContent>
+          <SelectContent className="w-36">
             {bits.map(({ text, value, key }) => (
-              <SelectItem key={key} value={value}>
+              <SelectItem key={key} value={value} className="w-36">
                 {text}
               </SelectItem>
             ))}
           </SelectContent>
         </Select>
-        <div className="flex ml-4 space-x-4">
+        <div className="flex ml-2 space-x-2">
           {actionButtons?.map(({ text, onClick, variant, className }) => (
             <Button
               key={text}