Split codebase (#455)

apps/yaak-client/components/core/Confirm.tsx

@@ -0,0 +1,74 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import { HStack } from "@yaakapp-internal/ui";
+import type { FormEvent } from "react";
+import { useState } from "react";
+import { CopyIconButton } from "../CopyIconButton";
+import { Button } from "./Button";
+import { PlainInput } from "./PlainInput";
+
+export interface ConfirmProps {
+  onHide: () => void;
+  onResult: (result: boolean) => void;
+  confirmText?: string;
+  requireTyping?: string;
+  color?: Color;
+}
+
+export function Confirm({
+  onHide,
+  onResult,
+  confirmText,
+  requireTyping,
+  color = "primary",
+}: ConfirmProps) {
+  const [confirm, setConfirm] = useState<string>("");
+  const handleHide = () => {
+    onResult(false);
+    onHide();
+  };
+
+  const didConfirm = !requireTyping || confirm === requireTyping;
+
+  const handleSuccess = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (didConfirm) {
+      onResult(true);
+      onHide();
+    }
+  };
+
+  return (
+    <form className="flex flex-col" onSubmit={handleSuccess}>
+      {requireTyping && (
+        <PlainInput
+          autoFocus
+          onChange={setConfirm}
+          placeholder={requireTyping}
+          labelRightSlot={
+            <CopyIconButton
+              tabIndex={-1}
+              text={requireTyping}
+              title="Copy name"
+              className="text-text-subtlest"
+              iconSize="sm"
+              size="2xs"
+            />
+          }
+          label={
+            <>
+              Type <strong>{requireTyping}</strong> to confirm
+            </>
+          }
+        />
+      )}
+      <HStack space={2} justifyContent="start" className="mt-2 mb-4 flex-row-reverse">
+        <Button type="submit" color={color} disabled={!didConfirm}>
+          {confirmText ?? "Confirm"}
+        </Button>
+        <Button onClick={handleHide} variant="border">
+          Cancel
+        </Button>
+      </HStack>
+    </form>
+  );
+}