'init'

2026-01-30 05:01:05 +02:00
commit 83f38dc63f
327 changed files with 18725 additions and 0 deletions
--- a/app/components/CopyInput/CopyInput.tsx
+++ b/app/components/CopyInput/CopyInput.tsx
@@ -0,0 +1,61 @@
+import { MantineSize, Input } from "@mantine/core";
+import { useState, useEffect } from "react";
+import { IconCopy, IconCheck } from "@tabler/icons-react";
+
+export interface CopyInputProps {
+    value: string;
+    caption: string;
+    timeout?: number;
+    size?: MantineSize;
+    fullWidth?: boolean;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+}
+
+export function CopyInput(props : CopyInputProps) {
+    const { value, caption, timeout = 1200, size = 'sm', fullWidth = true, onClick, style } = props;
+    const [copied, setCopied] = useState(false);
+
+    useEffect(() => {
+        if (!copied) return;
+        const t = setTimeout(() => setCopied(false), timeout);
+        return () => clearTimeout(t);
+    }, [copied, timeout]);
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onClick?.();
+        } catch {
+            // noop
+        }
+    };
+
+    return (
+        <div onClick={handleCopy} style={{ width: fullWidth ? '100%' : undefined, cursor: 'pointer' }}>
+            <Input
+                size={size}
+                value={value}
+                readOnly
+                disabled
+                rightSection={copied ? <IconCheck size={16} color="#2fb344" /> : <IconCopy size={16} />}
+                rightSectionPointerEvents={"none"}
+                placeholder={caption}
+                style={{
+                    pointerEvents: 'none',
+                    transition: 'background-color 160ms ease, box-shadow 160ms ease',
+                    //boxShadow: copied ? '0 0 0 1px rgba(47, 179, 68, 0.4) inset' : undefined,
+                    ...style,
+                }}
+                styles={{
+                    input: {
+                        backgroundColor: copied ? 'rgba(0, 255, 0, 0.15)' : undefined,
+                        border: copied ? '1px solid #2fb344' : undefined,
+                        color: copied ? '#2fb344' : undefined,
+                    }
+                }}
+            />
+        </div>
+    );
+}