feat: Add pki backup dialog, refactor Channels pre-shared key to support regenerate dialog

src/components/UI/Generator.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Button } from "@components/UI/Button.tsx";
+import { Button, type ButtonVariant } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import {
   Select,
@@ -16,11 +16,15 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   devicePSKBitCount?: number;
   value: string;
   variant: "default" | "invalid";
-  buttonText?: string;
+  actionButtons: {
+    text: string;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    variant: ButtonVariant;
+    className?: string;
+  }[];
   bits?: { text: string; value: string; key: string }[];
   selectChange: (event: string) => void;
   inputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  buttonClick: React.MouseEventHandler<HTMLButtonElement>;
   action?: {
     icon: LucideIcon;
     onClick: () => void;
@@ -35,7 +39,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
       devicePSKBitCount,
       variant,
       value,
-      buttonText,
+      actionButtons,
       bits = [
         { text: "256 bit", value: "32", key: "bit256" },
         { text: "128 bit", value: "16", key: "bit128" },
@@ -44,7 +48,6 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
       ],
       selectChange,
       inputChange,
-      buttonClick,
       action,
       disabled,
       ...props
@@ -94,15 +97,21 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
             ))}
           </SelectContent>
         </Select>
-        <Button
-          type="button"
-          variant="success"
-          onClick={buttonClick}
-          disabled={disabled}
-          {...props}
-        >
-          {buttonText}
-        </Button>
+        <div className="flex ml-4 space-x-4">
+          {actionButtons?.map(({ text, onClick, variant, className }) => (
+            <Button
+              key={text}
+              type="button"
+              onClick={onClick}
+              disabled={disabled}
+              variant={variant}
+              className={className}
+              {...props}
+            >
+              {text}
+            </Button>
+          ))}
+        </div>
       </>
     );
   },