Align BTCPay receipt layout with reference

2026-10-29 06:48:42 +01:00 · 2026-01-08 17:57:24 +00:00
parent 723891d7ea
commit a4df797294
3 changed files with 154 additions and 54 deletions
@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+
+type CopyIconButtonProps = {
+  value: string;
+  label: string;
+  className?: string;
+};
+
+export default function CopyIconButton({ value, label, className }: CopyIconButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={copied ? "Copied" : label}
+      onClick={handleCopy}
+      className={
+        className ??
+        "inline-flex h-7 w-7 items-center justify-center rounded-md border border-neutral-200 bg-white text-neutral-600 transition hover:bg-neutral-50"
+      }
+    >
+      {copied ? (
+        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M20 6 9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
+          <path
+            d="M8 5h9a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M6 17H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}
+
@@ -0,0 +1,21 @@
+"use client";
+
+type PrintButtonProps = {
+  className?: string;
+};
+
+export default function PrintButton({ className }: PrintButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={() => window.print()}
+      className={
+        className ??
+        "inline-flex items-center justify-center rounded-md border border-emerald-200 bg-white px-4 py-2 text-sm font-semibold text-emerald-600 transition hover:bg-emerald-50"
+      }
+    >
+      Print
+    </button>
+  );
+}
+