Add boilerplate for Playwright tests

examples/accident-counter/src/counter.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useReducer, useEffect } from 'react';
 import { reducer } from './reducer';
 
@@ -6,37 +7,39 @@ export const Counter = () => {
   const unit = state.count === 1 ? 'day' : 'days';
 
   useEffect(() => {
-    window.document.title = `${state.count} ${unit}`;
+    window.document.title = `${state.count} ${unit} — Accident Counter`;
   }, [state.count]);
 
   return (
-    <div className="space-y-8 rounded-md border border-slate-400 bg-white p-8 text-center shadow-lg">
-      <div className="space-y-4">
-        <div data-testid="counter-count" className="text-8xl font-semibold">
-          {state.count}
+    <main className="flex h-screen items-center justify-center">
+      <div className="space-y-8 rounded-md border border-slate-400 bg-white p-8 text-center shadow-lg">
+        <div className="space-y-4">
+          <div data-testid="counter-count" className="text-8xl font-semibold">
+            {state.count}
+          </div>
+          <p>
+            <span data-testid="counter-unit">{unit}</span> since the last
+            JavaScript-related accident.
+          </p>
+        </div>
+        <div className="flex gap-4">
+          <button onClick={() => dispatch({ type: 'increment' })}>
+            Increment
+          </button>
+          <button
+            onClick={() => dispatch({ type: 'decrement' })}
+            disabled={state.count === 0}
+          >
+            Decrement
+          </button>
+          <button
+            onClick={() => dispatch({ type: 'reset' })}
+            disabled={state.count === 0}
+          >
+            Reset
+          </button>
         </div>
-        <p>
-          <span data-testid="counter-unit">{unit}</span> since the last
-          JavaScript-related accident.
-        </p>
       </div>
-      <div className="flex gap-4">
-        <button onClick={() => dispatch({ type: 'increment' })}>
-          Increment
-        </button>
-        <button
-          onClick={() => dispatch({ type: 'decrement' })}
-          disabled={state.count === 0}
-        >
-          Decrement
-        </button>
-        <button
-          onClick={() => dispatch({ type: 'reset' })}
-          disabled={state.count === 0}
-        >
-          Reset
-        </button>
-      </div>
-    </div>
+    </main>
   );
 };