refactor: extract stats component

Author: nico-bachner

src/app/[date]/page.tsx

@@ -6,9 +6,7 @@ import { useState } from 'react'
 import { BOARDS } from '@/boards'
 import { Board } from '@/components/Board'
 import { Controls } from '@/components/Controls'
-import { Counter } from '@/components/Counter'
-import { useUserRecord } from '@/hooks/useUserRecord'
-import { getBotTurns } from '@/lib/getBotTurns'
+import { Stats } from '@/components/Stats'
 import { getNewBoard } from '@/lib/getNewBoard'
 import { getTileGroups } from '@/lib/getTileGroups'
 import { GameState } from '@/types/game'
@@ -30,36 +28,10 @@ const Page = () => {
     hint: undefined,
   })
 
-  const [botTurns, setBotTurns] = useState<number | undefined>(undefined)
-
-  const { userRecord, setUserRecord } = useUserRecord()
-
-  if (gameState.boardHistory[0].flat().every((tile) => tile == '')) {
-    if (!userRecord || gameState.stepCount < userRecord) {
-      setUserRecord(gameState.stepCount)
-      localStorage.setItem('record', gameState.stepCount.toString())
-    }
-  }
-
   return (
     <div className="sm:px-4 sm:py-8">
       <div className="mx-auto flex max-w-screen-sm flex-col sm:flex-row sm:gap-2">
-        <div className="flex h-min justify-between gap-4 bg-violet-900 p-3 sm:flex-col sm:rounded-lg">
-          <div className="flex gap-4 sm:flex-col">
-            <Counter label="Turns">{gameState.stepCount}</Counter>
-            <Counter label="Record">{userRecord}</Counter>
-          </div>
-
-          <Counter label="Bot">
-            <button
-              onClick={() => {
-                setBotTurns(getBotTurns(boardOfTheDay.tiles))
-              }}
-            >
-              {botTurns ?? 'Show'}
-            </button>
-          </Counter>
-        </div>
+        <Stats gameState={gameState} />
 
         <Board
           board={gameState.boardHistory[0]}

src/components/Button.tsx

@@ -15,6 +15,6 @@ export const Button: React.FC<ButtonProps> = ({
     onClick={onClick}
     className="flex size-12 items-center justify-center rounded-full bg-violet-700"
   >
-    <Icon className="text-violet-100" aria-label={label} />
+    <Icon className="stroke-violet-100" aria-label={label} />
   </button>
 )

src/components/Stats.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+
+import { useUserRecord } from '@/hooks/useUserRecord'
+import { getBotTurns } from '@/lib/getBotTurns'
+import { GameState } from '@/types/game'
+
+import { Counter } from './Counter'
+
+type StatsProps = {
+  gameState: GameState
+}
+
+export const Stats: React.FC<StatsProps> = ({ gameState }) => {
+  const { userRecord, setUserRecord } = useUserRecord()
+
+  if (gameState.boardHistory[0].flat().every((tile) => tile == '')) {
+    if (!userRecord || gameState.stepCount < userRecord) {
+      setUserRecord(gameState.stepCount)
+      localStorage.setItem('record', gameState.stepCount.toString())
+    }
+  }
+
+  const [botTurns, setBotTurns] = useState<number | undefined>(undefined)
+
+  return (
+    <div className="flex h-min justify-between gap-4 bg-violet-900 p-3 sm:flex-col sm:rounded-lg">
+      <div className="flex gap-4 sm:flex-col">
+        <Counter label="Turns">{gameState.stepCount}</Counter>
+        <Counter label="Record">{userRecord}</Counter>
+      </div>
+
+      <Counter label="Bot">
+        <button
+          onClick={() => {
+            setBotTurns(getBotTurns(gameState.boardHistory[0]))
+          }}
+        >
+          {botTurns ?? 'Show'}
+        </button>
+      </Counter>
+    </div>
+  )
+}