chore: add copy badge button

Author: eladroz

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>
   )

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>
+  )
+}

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>
+  )
+}