TransactionDetailRow.tsx raw

   1  import { CopyIcon } from "lucide-react";
   2  import { Button } from "src/components/ui/button";
   3  import { copyToClipboard } from "src/lib/clipboard";
   4  
   5  type TransactionDetailRowProps = {
   6    label: React.ReactNode;
   7    children: React.ReactNode;
   8    // when set, the value is shown next to a copy button that copies this string
   9    copyable?: string;
  10  };
  11  
  12  export function TransactionDetailRow({
  13    label,
  14    children,
  15    copyable,
  16  }: TransactionDetailRowProps) {
  17    return (
  18      <div>
  19        <p>{label}</p>
  20        <div className="flex items-center justify-between gap-4">
  21          {/* break-all lives on the wrapper so embedded JSX (links, spans) wraps too */}
  22          <div className="text-muted-foreground break-all">{children}</div>
  23          {copyable !== undefined && (
  24            <Button
  25              type="button"
  26              variant="ghost"
  27              size="icon-sm"
  28              className="text-muted-foreground"
  29              onClick={() => copyToClipboard(copyable)}
  30            >
  31              <CopyIcon />
  32            </Button>
  33          )}
  34        </div>
  35      </div>
  36    );
  37  }
  38