Theme Toggle for React

'use client'
import { useEffect, useState } from 'react'

export function ThemeToggle() {
  const [dark, setDark] = useState(true)
  useEffect(() => {
    document.documentElement.classList.toggle('dark', dark)
    localStorage.setItem('theme', dark ? 'dark' : 'light')
  }, [dark])
  return (
    <button type="button" onClick={() => setDark(value => !value)}
      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
      className="flex h-11 w-20 items-center rounded-full bg-slate-200 p-1 transition dark:bg-slate-800">
      <span className={'grid h-9 w-9 place-items-center rounded-full bg-white shadow transition-transform ' + (dark ? 'translate-x-9' : '')}>
        {dark ? '☀' : '☾'}
      </span>
    </button>
  )
}