From a111f8cef24811c1f3861a2c5a6ecc51a622aca6 Mon Sep 17 00:00:00 2001
From: Stuart Rutter <stuart.rutter@dmgmedia.tech>
Date: Mon, 27 May 2024 10:49:20 +0100
Subject: [PATCH 1/6] feat: logo and test runner css

---
 components/Header.js           |  2 +-
 components/Layout.js           |  2 +-
 components/TestRunner/index.js | 12 +++++++-----
 styles/buttons.module.css      |  3 +--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index 616a444..37b28b3 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -24,7 +24,7 @@ export default function Header(props) {
         <div className="flex items-center flex-shrink-0 mr-6">
           <a href="/" className="no-underline text-black">
             <span className="sr-only">jsPerf Home Page</span>
-            <span className="font-semibold text-2xl tracking-tight">jsPerf.app</span>
+            <span className="font-semibold text-2xl tracking-tight"><span className="font-bold text-3xl bg-yellow-300 p-1 pt-5 pl-5 mr-1">JS</span>Perf.app</span>
           </a>
         </div>
         <div className="block lg:hidden">
diff --git a/components/Layout.js b/components/Layout.js
index 6d76719..8c981c8 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -14,7 +14,7 @@ export default function Layout(props) {
   return (
     <>
       <SessionProvider>
-        <div className="font-sans antialiased min-h-full flex flex-col bg-gray-100">
+        <div className="font-sans antialiased min-h-full flex flex-col">
           <div className="flex-auto ">
             <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
               <Header navState={navState} />
diff --git a/components/TestRunner/index.js b/components/TestRunner/index.js
index 1846586..d21b2d3 100644
--- a/components/TestRunner/index.js
+++ b/components/TestRunner/index.js
@@ -116,8 +116,9 @@ export default function Tests(props) {
 
   return (
     <>
-      <h2 className="font-bold my-5">Test runner</h2>
-      <div id="controls" className="flex my-5 h-16 items-center">
+    <h2 className="font-bold my-5">Test runner</h2>
+    <div className="shadow-2xl">
+      <div id="controls" className="flex px-2 my-5 h-16 items-center">
         <p id="status" className="flex-1">
           {
             'ready' === benchStatus 
@@ -134,7 +135,7 @@ export default function Tests(props) {
               onClick={() => run({maxTime: 5})}>{runButtonText[benchStatus]||runButtonText['default']}</button>
             <button
               type="button" 
-              className={buttonStyles.default}
+              className={`${buttonStyles.default} bg-green-600`}
               onClick={() => run({maxTime: 0.5})}>Quick Run</button>
             </>
         }
@@ -152,9 +153,9 @@ export default function Tests(props) {
       </div>
       <table id="test-table" className="w-full border-collapse">
         <caption className="bg-gray-200 font-bold text-md text-gray-800">Testing in <UserAgent /></caption>
-        <thead className="bg-blue-500 text-white">
+        <thead className="text-blue-500 ">
           <tr>
-            <th colSpan="2" className="py-1">Test</th>
+            <th colSpan="2" className="py-1">Test cases</th>
             <th title="Operations per second (higher is better)" className="px-2">Ops/sec</th>
           </tr>
         </thead>
@@ -164,6 +165,7 @@ export default function Tests(props) {
           )}
         </tbody>
       </table>
+    </div>
     </>
   )
 }
diff --git a/styles/buttons.module.css b/styles/buttons.module.css
index e093f19..fd90661 100644
--- a/styles/buttons.module.css
+++ b/styles/buttons.module.css
@@ -1,10 +1,9 @@
 .default {
   @apply no-underline;
   @apply bg-gray-100 hover:bg-gray-200;
-  @apply border border-gray-400;
+  @apply border border-gray-300;
   @apply font-bold;
   @apply py-2 px-2;
-  @apply rounded;
   color: #000000;
   cursor: pointer;
 }

From f3ac5e36fec8e4ec0728e20472b3a101ffc74536 Mon Sep 17 00:00:00 2001
From: Stuart Rutter <stuart.rutter@dmgmedia.tech>
Date: Mon, 27 May 2024 11:23:15 +0100
Subject: [PATCH 2/6] feat: mv sandbox ui

---
 app/sandbox.html/page.js               | 2 +-
 components/{UI.js => Sandbox/index.js} | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename components/{UI.js => Sandbox/index.js} (99%)

diff --git a/app/sandbox.html/page.js b/app/sandbox.html/page.js
index 5a77d9a..3ad178e 100644
--- a/app/sandbox.html/page.js
+++ b/app/sandbox.html/page.js
@@ -1,4 +1,4 @@
-import UI from '@/components/UI'
+import UI from '@/components/Sandbox'
 
 export default function Sandbox(props) {
   return (
diff --git a/components/UI.js b/components/Sandbox/index.js
similarity index 99%
rename from components/UI.js
rename to components/Sandbox/index.js
index 5d4c306..a9372f7 100644
--- a/components/UI.js
+++ b/components/Sandbox/index.js
@@ -9,7 +9,7 @@ import '@/app/lib/benchmark.mjs' // mjs to avoid webpack parser
 
 let modulePromises = {}
 
-export default function UI(props) {
+export default function Sandbox(props) {
   const Benchmark = global.Benchmark
 
   const initHTMLPlaceholder = useRef()

From 1850860e75fe655766dee9535fe9baa95ab24ebb Mon Sep 17 00:00:00 2001
From: Stuart Rutter <stuart.rutter@dmgmedia.tech>
Date: Mon, 27 May 2024 12:37:28 +0100
Subject: [PATCH 3/6] feat: add accordian component, full width layout

---
 app/page.js                    |  8 +++----
 components/Accordian.js        | 26 +++++++++++++++++++++
 components/Layout.js           |  2 +-
 components/TestRunner/index.js |  1 -
 components/UI/index.js         | 41 ++++++++++++++++++++++++++++++++++
 components/sections/Title.js   | 17 ++++++++++++++
 styles/accordian.module.css    | 16 +++++++++++++
 7 files changed, 105 insertions(+), 6 deletions(-)
 create mode 100644 components/Accordian.js
 create mode 100644 components/UI/index.js
 create mode 100644 components/sections/Title.js
 create mode 100644 styles/accordian.module.css

diff --git a/app/page.js b/app/page.js
index 5c73df6..d5ef88f 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,12 +1,12 @@
 import Layout from '@/components/Layout'
-import EditForm from '@/components/EditForm'
+import UI from '@/components/UI'
 
 export default function Home(props) {
   return (
     <>
-    <Layout navState={{ about: true }}>
-      <h1 className="font-semibold py-2">Create a test case</h1>
-      <EditForm />
+    <Layout navState={{ about: false }}>
+      <br />
+      <UI editable={true} />
     </Layout>
     </>
   )
diff --git a/components/Accordian.js b/components/Accordian.js
new file mode 100644
index 0000000..cefce5e
--- /dev/null
+++ b/components/Accordian.js
@@ -0,0 +1,26 @@
+import accordianStyles from '@/styles/accordian.module.css'
+
+export const Accordian = ({children}) => {
+  return (
+    <div className={`${accordianStyles.default} mx-auto w-full`}>
+      {children}
+    </div>
+  )
+}
+
+export const AccordianItem = (props) => {
+  const {children, title, open} = props
+  return (
+    <details className="bg-white open:bg-gray-100 duration-300 my-2 border" open={!!open}>
+      <summary className="bg-inherit px-5 py-0 text-md flex cursor-pointer">
+        {title}
+        <button className="ml-auto" type="button">
+          <svg className="fill-current opacity-75 w-4 h-4 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
+        </button>
+      </summary>
+      <div className="bg-white px-5 py-3 text-sm font-light flex">
+        {children}
+      </div>
+    </details>
+  )
+}
diff --git a/components/Layout.js b/components/Layout.js
index 8c981c8..1f86d85 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -16,7 +16,7 @@ export default function Layout(props) {
       <SessionProvider>
         <div className="font-sans antialiased min-h-full flex flex-col">
           <div className="flex-auto ">
-            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
+            <div className="mx-auto px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
               <Header navState={navState} />
               { children }
               <Footer />
diff --git a/components/TestRunner/index.js b/components/TestRunner/index.js
index d21b2d3..4f1869c 100644
--- a/components/TestRunner/index.js
+++ b/components/TestRunner/index.js
@@ -116,7 +116,6 @@ export default function Tests(props) {
 
   return (
     <>
-    <h2 className="font-bold my-5">Test runner</h2>
     <div className="shadow-2xl">
       <div id="controls" className="flex px-2 my-5 h-16 items-center">
         <p id="status" className="flex-1">
diff --git a/components/UI/index.js b/components/UI/index.js
new file mode 100644
index 0000000..8a6e9bc
--- /dev/null
+++ b/components/UI/index.js
@@ -0,0 +1,41 @@
+import Title from '@/components/sections/Title'
+
+import TestRunner from '@/components/TestRunner'
+import {Accordian, AccordianItem} from '@/components/Accordian'
+
+export default async function UI(props) {
+  const { editable } = props
+
+  const pageData = {
+    initHTML: '',
+    setup: '',
+    teardown: '',
+    tests: [
+      { title: 'Underscore Flatten', code: 'const a = 234' },
+      { title: 'Native Flatten', code: 'const a = 345435' }
+    ]
+  }
+
+  return (
+    <>
+      <section>
+        <Title editable={editable} pageData={pageData} />
+        <input type="text" className="w-full text-md px-2 my-1" placeholder="Description (optional)" />
+        <Accordian>
+          <AccordianItem title="Setup HTML">
+          </AccordianItem>
+
+          <AccordianItem title="Setup Javascript">
+          </AccordianItem>
+        </Accordian>
+
+        <TestRunner tests={pageData.tests} initHTML={pageData.initHTML} setup={pageData.setup} teardown={pageData.teardown} />
+
+        <Accordian>
+          <AccordianItem title="Teardown">
+          </AccordianItem>
+        </Accordian>
+      </section>
+    </>
+  )
+}
diff --git a/components/sections/Title.js b/components/sections/Title.js
new file mode 100644
index 0000000..ea46c47
--- /dev/null
+++ b/components/sections/Title.js
@@ -0,0 +1,17 @@
+export default function Title(props) {
+  const { editable, pageData} = props
+
+  if (editable) {
+    return (
+      <input type="text" className="w-full text-2xl border-b border-gray-300 p-2" placeholder="Benchmark Title (optional)" />
+    )
+  }
+
+  return (
+    <>
+      <hgroup>
+        <h1 className="text-2xl py-6 font-bold">{pageData.title}<span className="text-gray-400 text-base">{`${pageData.revision > 1 ? ` (v${pageData.revision})` : ''}`}</span></h1>
+      </hgroup>
+    </>
+  )
+}
diff --git a/styles/accordian.module.css b/styles/accordian.module.css
new file mode 100644
index 0000000..d1bca26
--- /dev/null
+++ b/styles/accordian.module.css
@@ -0,0 +1,16 @@
+.default details button {
+  pointer-events: none;
+}
+
+.default details summary svg { 
+  transform: rotate(90deg);
+  transition: all 0.3s;
+}
+
+.default details[open] summary svg {
+  transform: rotate(-90deg);  
+}
+
+.default details[open] summary ~ * {	
+  animation: ease-opacity-t-b .5s ease
+}

From a7be3cde2441ea3b1ff3e3f85e6f01dba3a7f9c8 Mon Sep 17 00:00:00 2001
From: Stuart Rutter <stuart.rutter@dmgmedia.tech>
Date: Mon, 27 May 2024 16:21:20 +0100
Subject: [PATCH 4/6] feat: form style

---
 components/UI/index.js       | 90 ++++++++++++++++++++++++++++--------
 components/sections/Title.js |  4 +-
 styles/buttons.module.css    |  9 ++++
 3 files changed, 81 insertions(+), 22 deletions(-)

diff --git a/components/UI/index.js b/components/UI/index.js
index 8a6e9bc..62a9f64 100644
--- a/components/UI/index.js
+++ b/components/UI/index.js
@@ -1,41 +1,91 @@
-import Title from '@/components/sections/Title'
+"use client"
+
+import { useState } from 'react'
 
+import buttonStyles from '@/styles/buttons.module.css'
+import Title from '@/components/sections/Title'
+import Meta from '@/components/sections/Meta'
 import TestRunner from '@/components/TestRunner'
 import {Accordian, AccordianItem} from '@/components/Accordian'
+import Editor from '@/components/Editor'
 
-export default async function UI(props) {
+export default function UI(props) {
   const { editable } = props
 
   const pageData = {
     initHTML: '',
     setup: '',
     teardown: '',
+    title: 'sdfdsf',
     tests: [
       { title: 'Underscore Flatten', code: 'const a = 234' },
       { title: 'Native Flatten', code: 'const a = 345435' }
     ]
   }
 
+
+  // Code block states
+  const [codeBlockInitHTML, setCodeBlockInitHTML] = useState(pageData?.initHTML || '')
+  const [codeBlockSetup, setCodeBlockSetup] = useState(pageData?.setup || '')
+  const [codeBlockTeardown, setCodeBlockTeardown] = useState(pageData?.teardown || '')
+
+  const formDefaults = Object.assign({}, {
+    title: '',
+    info: '',
+    slug: '',
+    visible: false
+  }, pageData)
+
+  const submitFormHandler = (event) => {
+    event.preventDefault()
+
+    const formData = (({
+      title, 
+      info
+    }) => ({
+      title: title?.value || '', 
+      info: info?.value || ''
+    }))( event.target )
+
+    formData.slug = formDefaults.slug
+
+    formData.initHTML = codeBlockInitHTML
+
+    console.log(formData)
+  }
+
   return (
     <>
-      <section>
-        <Title editable={editable} pageData={pageData} />
-        <input type="text" className="w-full text-md px-2 my-1" placeholder="Description (optional)" />
-        <Accordian>
-          <AccordianItem title="Setup HTML">
-          </AccordianItem>
-
-          <AccordianItem title="Setup Javascript">
-          </AccordianItem>
-        </Accordian>
-
-        <TestRunner tests={pageData.tests} initHTML={pageData.initHTML} setup={pageData.setup} teardown={pageData.teardown} />
-
-        <Accordian>
-          <AccordianItem title="Teardown">
-          </AccordianItem>
-        </Accordian>
-      </section>
+      <form onSubmit={submitFormHandler}>
+        <section>
+          <Title editable={editable} title={pageData.title} />
+          <input type="text" className="w-full text-md px-2 my-1" placeholder="Description (optional)" />
+
+          <Accordian>
+            <AccordianItem title="Setup HTML">
+              <Editor code={codeBlockInitHTML} onUpdate={setCodeBlockInitHTML} className="html w-full p-2 border" style={{minHeight: "150px"}} />
+            </AccordianItem>
+
+            <AccordianItem title="Setup Javascript">
+            </AccordianItem>
+          </Accordian>
+
+          <TestRunner tests={pageData.tests} initHTML={pageData.initHTML} setup={pageData.setup} teardown={pageData.teardown} />
+
+        </section>
+        <br />
+        <section>
+          <Accordian>
+            <AccordianItem title="Teardown">
+            </AccordianItem>
+          </Accordian>
+        </section>
+        <br /> 
+
+        <section className="flex justify-end">
+          <button type="submit" className={`${buttonStyles.submit}`}>Save</button>
+        </section>
+      </form>
     </>
   )
 }
diff --git a/components/sections/Title.js b/components/sections/Title.js
index ea46c47..cde0094 100644
--- a/components/sections/Title.js
+++ b/components/sections/Title.js
@@ -1,9 +1,9 @@
 export default function Title(props) {
-  const { editable, pageData} = props
+  const { editable, title} = props
 
   if (editable) {
     return (
-      <input type="text" className="w-full text-2xl border-b border-gray-300 p-2" placeholder="Benchmark Title (optional)" />
+      <input type="text" name="title" className="w-full text-2xl border-b border-gray-300 p-2" placeholder="Benchmark Title (optional)" defaultValue={title} />
     )
   }
 
diff --git a/styles/buttons.module.css b/styles/buttons.module.css
index fd90661..fd05c36 100644
--- a/styles/buttons.module.css
+++ b/styles/buttons.module.css
@@ -8,6 +8,15 @@
   cursor: pointer;
 }
 
+.submit {
+  @apply no-underline;
+  @apply bg-blue-500 hover:bg-gray-200;
+  @apply font-bold;
+  @apply py-2 px-2;
+  color: #ffffff;
+  cursor: pointer;
+}
+
 .default > * {
   vertical-align: middle;
 }

From 0f140f6cf508b8893e2c20942c5bb0fcbd5f517f Mon Sep 17 00:00:00 2001
From: Stuart Rutter <stuart.rutter@dmgmedia.tech>
Date: Sun, 2 Feb 2025 20:53:06 +0000
Subject: [PATCH 5/6] feat: 2.0 css

---
 components/Header.js           |  8 ++---
 components/Layout.js           |  6 ++--
 components/TestRunner/index.js | 18 +++++-----
 components/UI/index.js         | 60 ++++++++++++++++++++++++----------
 styles/globals.css             |  4 +++
 5 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index 37b28b3..d53927e 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -20,11 +20,11 @@ export default function Header(props) {
 
   return (
     <header>
-      <nav className="flex items-center justify-between flex-wrap py-2">
+      <nav className="flex items-center justify-between flex-wrap border-b-2 border-gray-300 bg-white">
         <div className="flex items-center flex-shrink-0 mr-6">
-          <a href="/" className="no-underline text-black">
+          <a href="/" className="no-underline text-black h-full">
             <span className="sr-only">jsPerf Home Page</span>
-            <span className="font-semibold text-2xl tracking-tight"><span className="font-bold text-3xl bg-yellow-300 p-1 pt-5 pl-5 mr-1">JS</span>Perf.app</span>
+            <span className="font-semibold text-2xl tracking-tight"><span className="inline-block font-bold text-3xl bg-jsp-yellow py-2 pr-1 pl-3 mr-1">JS</span>Perf.app</span>
           </a>
         </div>
         <div className="block lg:hidden">
@@ -40,7 +40,7 @@ export default function Header(props) {
           </div>
           { !session &&
           <div>
-            <button className="flex items-center inline-block text-sm px-4 py-2 hover:fill-blue-500 hover:text-blue-500 lg:mt-0" onClick={() => signIn("github")}>
+            <button className="flex items-center inline-block text-sm px-4 py-4 hover:fill-blue-500 hover:text-blue-500 lg:mt-0" onClick={() => signIn("github")}>
               <span>Sign In</span>
               <GitHubIcon fill="#000000" width={16} height={16} className="ml-2 fill-inherit" />
             </button>
diff --git a/components/Layout.js b/components/Layout.js
index 1f86d85..7679f47 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -14,10 +14,10 @@ export default function Layout(props) {
   return (
     <>
       <SessionProvider>
-        <div className="font-sans antialiased min-h-full flex flex-col">
+        <div className="font-sans antialiased min-h-full flex flex-col bg-gray-50">
           <div className="flex-auto ">
-            <div className="mx-auto px-4 sm:px-6 lg:px-8 bg-white min-h-screen">
-              <Header navState={navState} />
+            <Header navState={navState} />
+            <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen">
               { children }
               <Footer />
             </div>
diff --git a/components/TestRunner/index.js b/components/TestRunner/index.js
index 4f1869c..5af1762 100644
--- a/components/TestRunner/index.js
+++ b/components/TestRunner/index.js
@@ -116,7 +116,7 @@ export default function Tests(props) {
 
   return (
     <>
-    <div className="shadow-2xl">
+    <div className="mt-5">
       <div id="controls" className="flex px-2 my-5 h-16 items-center">
         <p id="status" className="flex-1">
           {
@@ -127,15 +127,10 @@ export default function Tests(props) {
         </p>
         { ['ready', 'complete'].includes(benchStatus) &&
           <>
-            <button 
-              id="run" 
-              type="button" 
-              className={`${buttonStyles.default} mx-2`} 
-              onClick={() => run({maxTime: 5})}>{runButtonText[benchStatus]||runButtonText['default']}</button>
             <button
               type="button" 
-              className={`${buttonStyles.default} bg-green-600`}
-              onClick={() => run({maxTime: 0.5})}>Quick Run</button>
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              onClick={() => run({maxTime: 0.5})}>Run Tests &#9654;</button>
             </>
         }
         { 'running' === benchStatus &&
@@ -151,8 +146,8 @@ export default function Tests(props) {
           style={{height: "1px", width: "1px"}}></iframe>
       </div>
       <table id="test-table" className="w-full border-collapse">
-        <caption className="bg-gray-200 font-bold text-md text-gray-800">Testing in <UserAgent /></caption>
-        <thead className="text-blue-500 ">
+        <caption className="bg-gray-300 font-bold text-md text-black">Testing in <UserAgent /></caption>
+        <thead className="text-white bg-blue-500 ">
           <tr>
             <th colSpan="2" className="py-1">Test cases</th>
             <th title="Operations per second (higher is better)" className="px-2">Ops/sec</th>
@@ -162,6 +157,9 @@ export default function Tests(props) {
           {tests.map((test, i) => 
             <Test key={i} test={test} benchStatus={benchStatus} />
           )}
+          <tr>
+            <td colSpan="3" className="bg-gray-100 text-black font-bold text-center">+ Add Test</td>
+          </tr>
         </tbody>
       </table>
     </div>
diff --git a/components/UI/index.js b/components/UI/index.js
index 62a9f64..4c08e00 100644
--- a/components/UI/index.js
+++ b/components/UI/index.js
@@ -16,7 +16,7 @@ export default function UI(props) {
     initHTML: '',
     setup: '',
     teardown: '',
-    title: 'sdfdsf',
+    title: '',
     tests: [
       { title: 'Underscore Flatten', code: 'const a = 234' },
       { title: 'Native Flatten', code: 'const a = 345435' }
@@ -59,31 +59,57 @@ export default function UI(props) {
       <form onSubmit={submitFormHandler}>
         <section>
           <Title editable={editable} title={pageData.title} />
-          <input type="text" className="w-full text-md px-2 my-1" placeholder="Description (optional)" />
+        </section>
+          
+        <br />
+        <section>
+          <button className="bg-gray-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded">
+            + Description
+          </button>
 
-          <Accordian>
-            <AccordianItem title="Setup HTML">
-              <Editor code={codeBlockInitHTML} onUpdate={setCodeBlockInitHTML} className="html w-full p-2 border" style={{minHeight: "150px"}} />
-            </AccordianItem>
+          <button className="bg-gray-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded">
+            + Library
+          </button>
 
-            <AccordianItem title="Setup Javascript">
-            </AccordianItem>
-          </Accordian>
+          <button className="bg-gray-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded">
+            + Setup
+          </button>
 
-          <TestRunner tests={pageData.tests} initHTML={pageData.initHTML} setup={pageData.setup} teardown={pageData.teardown} />
+          <button className="bg-gray-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded">
+            + Teardown
+          </button>
 
+          {/* <button className="bg-blue-300 mr-2 hover:bg-blue-700 text-black font-bold py-2 px-4 rounded"> */}
+          {/*   Test Environment */}
+          {/* </button> */}
         </section>
-        <br />
+
+          {/* <input type="text" className="w-full text-md px-2 my-1" placeholder="Description (optional)" /> */}
+
+          {/* <Accordian> */}
+          {/*   <AccordianItem title="Setup HTML"> */}
+          {/*     <Editor code={codeBlockInitHTML} onUpdate={setCodeBlockInitHTML} className="html w-full p-2 border" style={{minHeight: "150px"}} /> */}
+          {/*   </AccordianItem> */}
+          {/*  */}
+          {/*   <AccordianItem title="Setup Javascript"> */}
+          {/*   </AccordianItem> */}
+          {/* </Accordian> */}
+
         <section>
-          <Accordian>
-            <AccordianItem title="Teardown">
-            </AccordianItem>
-          </Accordian>
+          <TestRunner tests={pageData.tests} initHTML={pageData.initHTML} setup={pageData.setup} teardown={pageData.teardown} />
+
         </section>
-        <br /> 
+        <br />
+        {/* <section> */}
+        {/*   <Accordian> */}
+        {/*     <AccordianItem title="Teardown"> */}
+        {/*     </AccordianItem> */}
+        {/*   </Accordian> */}
+        {/* </section> */}
+        {/* <br />  */}
 
         <section className="flex justify-end">
-          <button type="submit" className={`${buttonStyles.submit}`}>Save</button>
+          <button type="submit" className={`${buttonStyles.default}`}>Save</button>
         </section>
       </form>
     </>
diff --git a/styles/globals.css b/styles/globals.css
index 7a458e9..5c3f052 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -23,6 +23,10 @@ a:hover {
   .bg-jsp-blue {
     background-image: linear-gradient(to bottom, #6ca5dd, #1a6ab9);
   }
+
+  .bg-jsp-yellow {
+    background-color: rgb(244 225 30);
+  }
 }
 
 

From e79a02b0c41dad5e46f7f43b7b3418873beb7fec Mon Sep 17 00:00:00 2001
From: Stuart Rutter <stuart.rutter@dmgmedia.tech>
Date: Fri, 21 Feb 2025 14:59:59 +0000
Subject: [PATCH 6/6] feat: full width

---
 components/Header.js | 2 +-
 components/Layout.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Header.js b/components/Header.js
index d53927e..f2a0d77 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -21,7 +21,7 @@ export default function Header(props) {
   return (
     <header>
       <nav className="flex items-center justify-between flex-wrap border-b-2 border-gray-300 bg-white">
-        <div className="flex items-center flex-shrink-0 mr-6">
+        <div className="flex items-center flex-shrink-0 mr-6 max-w-6xl">
           <a href="/" className="no-underline text-black h-full">
             <span className="sr-only">jsPerf Home Page</span>
             <span className="font-semibold text-2xl tracking-tight"><span className="inline-block font-bold text-3xl bg-jsp-yellow py-2 pr-1 pl-3 mr-1">JS</span>Perf.app</span>
diff --git a/components/Layout.js b/components/Layout.js
index 7679f47..3380049 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -17,7 +17,7 @@ export default function Layout(props) {
         <div className="font-sans antialiased min-h-full flex flex-col bg-gray-50">
           <div className="flex-auto ">
             <Header navState={navState} />
-            <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen">
+            <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen bg-white">
               { children }
               <Footer />
             </div>