chore: add header and footer styling

e2e/home.spec.ts

@@ -10,6 +10,16 @@ test.describe('when a user navigates to the homepage', () => {
     await expect(page).toHaveTitle(/JSON Validator/)
   })
 
+  test('has heading', async ({ page }) => {
+    await page.getByText('JSON Validator').click()
+    await expect(page).toHaveURL('https://github.com/tjmaynes/json-validator')
+  })
+
+  test('has footer', async ({ page }) => {
+    await page.getByText('TJ Maynes').click()
+    await expect(page).toHaveURL('https://tjmaynes.com/')
+  })
+
   test('has initial state set', async ({ page }) => {
     await expect(page.getByText('🤘')).toBeVisible()
     await expect(page.getByText('👍')).not.toBeVisible()

src/App.tsx

@@ -1,13 +1,30 @@
 import { SimpleJsonEditor } from '@/components'
 
-const App = () => {
-  return (
-    <div className="grid grid-flow-row">
-      <header>JSON Validator</header>
+const App = () => (
+  <div className="font-mono grid grid-flow-row bg-amber-200">
+    <header className="text-center pl-0 mt-3 sm:text-left sm:pl-4">
+      <a
+        href="https://github.com/tjmaynes/json-validator"
+        className="text-2xl font-bold text-blue-600 dark:text-blue-500"
+      >
+        JSON Validator
+      </a>
+    </header>
+    <section className="p-7">
       <SimpleJsonEditor />
-      <footer>TJ Maynes</footer>
-    </div>
-  )
-}
+    </section>
+    <footer className="pl-0 mb-4 sm:pl-4">
+      <p className="text-sm text-center sm:text-left">
+        Built for fun & learning by{' '}
+        <a
+          href="https://tjmaynes.com/"
+          className="text-blue-600 dark:text-blue-500"
+        >
+          TJ Maynes
+        </a>
+      </p>
+    </footer>
+  </div>
+)
 
 export default App

src/components/SimpleJsonEditor.tsx

@@ -126,7 +126,7 @@ export const SimpleJsonEditor = () => {
   const onCopyButtonClickedHandler = useCallback(() => {
     navigator.clipboard.writeText(state.value)
 
-    toast('Copied to clipboard!', { icon: '✍' })
+    toast('Copied to clipboard!', { icon: '🐾' })
   }, [state])
 
   const onClearButtonClickedHandler = useCallback(() => {
@@ -138,8 +138,8 @@ export const SimpleJsonEditor = () => {
   }, [])
 
   return (
-    <div className="flex flex-col w-full h-full bg-amber-200 p-10">
-      <p className="mb-7 text-center text-7xl">{emoji}</p>
+    <div className="flex flex-col w-full h-full">
+      <p className="mb-8 text-center text-7xl">{emoji}</p>
       <JsonEditor
         placeholder="Type or paste your json here..."
         value={state.value}