Move ColorModeSwitcher to a separate component

hasparus · hasparus · commit 292a83fcf53a · 2023-06-15T10:59:23.000+02:00
diff --git a/packages/docs/src/components/layout.js b/packages/docs/src/components/layout.js
@@ -37,12 +37,6 @@ const getModeName = (mode) => {
 
 export default function DocsLayout(props) {
   const [menuOpen, setMenuOpen] = useState(false)
-  const [mode, setMode] = useColorMode()
-  const [hydrated, setHydrated] = useState(false)
-
-  useEffect(() => {
-    setHydrated(true)
-  }, [])
 
   const { pathname } = props.location
   const isLanding = pathname === '/'
@@ -53,8 +47,6 @@ export default function DocsLayout(props) {
 
   const showNav = !props.pageContext?.frontmatter?.hidenav
 
-  const nextColorMode = modes[(modes.indexOf(mode) + 1) % modes.length]
-
   return (
     <Fragment>
       <Head {...props} />
@@ -95,16 +87,7 @@ export default function DocsLayout(props) {
                 <NavLink href="https://github.com/system-ui/theme-ui">
                   GitHub
                 </NavLink>
-                <Button
-                  aria-label={`Change color mode to ${nextColorMode}`}
-                  sx={{
-                    ml: 2,
-                    whiteSpace: 'pre',
-                  }}
-                  onClick={() => setMode(nextColorMode)}
-                >
-                  {getModeName(hydrated ? mode : undefined)}
-                </Button>
+                <ColorModeSwitcher />
               </Flex>
             </Flex>
           </Flex>
@@ -209,3 +192,27 @@ function HeaderScrollShadow() {
     />
   )
 }
+
+function ColorModeSwitcher() {
+  const [mode, setMode] = useColorMode()
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    setHydrated(true)
+  }, [])
+
+  const nextColorMode = modes[(modes.indexOf(mode) + 1) % modes.length]
+
+  return (
+    <Button
+      aria-label={`Change color mode to ${nextColorMode}`}
+      sx={{
+        ml: 2,
+        whiteSpace: 'pre',
+      }}
+      onClick={() => setMode(nextColorMode)}
+    >
+      {getModeName(hydrated ? mode : undefined)}
+    </Button>
+  )
+}
