From d13650ed64e01da022d28f2ed7b4ae45c5252c34 Mon Sep 17 00:00:00 2001
From: Elad Rosenheim <elad.rosenheim@gmail.com>
Date: Mon, 17 Jun 2024 22:36:47 +0300
Subject: [PATCH] chore: add copy badge button

---
 e2e-report/app/page.js              | 29 +++++++++++++++++++----------
 e2e-report/components/copy-badge.js | 18 ++++++++++++++++++
 e2e-report/components/icons.js      | 19 +++++++++++++++++++
 3 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 e2e-report/components/copy-badge.js

diff --git a/e2e-report/app/page.js b/e2e-report/app/page.js
index a95dc104a7..5ef6f7c348 100644
--- a/e2e-report/app/page.js
+++ b/e2e-report/app/page.js
@@ -1,8 +1,11 @@
+/* eslint-disable @next/next/no-img-element */
 import Image from 'next/image'
 import Table from '@/components/table'
 import ComponentSwitcher from '@/components/switcher'
 import StatsRow from '@/components/stats'
 import testData from '@/utils/data'
+import { CopyIcon } from '@/components/icons'
+import CopyBadgeButton from '@/components/copy-badge'
 
 export default function Home() {
   // User can switch between two test suite tables: one with all non-empty suites,
@@ -25,16 +28,22 @@ export default function Home() {
 
 function Header() {
   return (
-    <div className="flex w-full items-center gap-4 bg-primary text-base-100 p-2 md:p-4 justify-center">
-      <Image
-        alt="netlify logo"
-        src="/logo.svg"
-        width={97}
-        height={40}
-        className="hidden md:block"
-      />
-      <span className="md:text-lg font-bold uppercase">
-        Next.js E2E Tests on Netlify Runtime v5
+    <div className="flex w-full items-center gap-4 bg-primary text-base-100 p-2 md:p-4 justify-center md:justify-between">
+      <span className="flex gap-4 items-center">
+        <Image
+          alt="netlify logo"
+          src="/logo.svg"
+          width={97}
+          height={40}
+          className="hidden md:block"
+        />
+        <span className="md:text-lg font-bold">Next.js E2E Tests on Netlify Runtime v5</span>
+      </span>
+      <span className="hidden md:flex gap-2 items-center">
+        <a href="/" target="_blank">
+          <img src="/badge" width="200" height="30" alt="Netlify Next.js runtime v5 test status" />
+        </a>
+        <CopyBadgeButton />
       </span>
     </div>
   )
diff --git a/e2e-report/components/copy-badge.js b/e2e-report/components/copy-badge.js
new file mode 100644
index 0000000000..ed20e9d5f6
--- /dev/null
+++ b/e2e-report/components/copy-badge.js
@@ -0,0 +1,18 @@
+'use client'
+import { CopyIcon } from './icons'
+
+const host = 'https://runtime-e2e-report.netlify.app' // fixed
+const badgeLink = `<a href="${host}/" target="_blank"><img src="${host}/badge" width="200" height="30" alt="Netlify Next.js runtime v5 test status" /></a>`
+
+export default function CopyBadgeButton() {
+  return (
+    <button
+      className="btn btn-xs btn-outline text-white rounded px-0.5"
+      onClick={() => {
+        navigator.clipboard.writeText(badgeLink)
+      }}
+    >
+      <CopyIcon className="size-4" />
+    </button>
+  )
+}
diff --git a/e2e-report/components/icons.js b/e2e-report/components/icons.js
index abed086d70..cd667fa977 100644
--- a/e2e-report/components/icons.js
+++ b/e2e-report/components/icons.js
@@ -64,3 +64,22 @@ export function GithubIcon({ className }) {
     </svg>
   )
 }
+
+export function CopyIcon({ className }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"
+      />
+    </svg>
+  )
+}