since3-portal/modules/admin/ui/components/copy-field.tsx

"use client"

import { useState } from "react";
import { CheckIcon, CopyIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Field, FieldLabel } from "@/components/ui/field";

export function CopyField({ label, value }: { label: string; value: string }) {
    const [copied, setCopied] = useState(false);

    async function handleCopy() {
        await navigator.clipboard.writeText(value);
        setCopied(true);
        setTimeout(() => setCopied(false), 1500);
    }

    return (
        <Field>
            <FieldLabel>{label}</FieldLabel>
            <div className="flex items-center gap-2">
                <Input value={value} readOnly className="focus-visible:ring-0" />
                <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    className="shrink-0 cursor-pointer"
                    onClick={handleCopy}
                    aria-label={`${label} kopieren`}
                >
                    {copied ? <CheckIcon className="text-signal-success" /> : <CopyIcon />}
                </Button>
            </div>
        </Field>
    )
}