Switch theme docs added

neilveil · Sep 28, 2023 · 4370212 · 4370212
1 parent a66676c
commit 4370212
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/src/components/docs/index.tsx b/src/components/docs/index.tsx
@@ -1,20 +1,18 @@
+import { SwitchTheme } from 'components'
+import { SetMeta } from 'helpers'
 import { Code, Message, Table } from 'lib'
+import metagraph from 'metagraph'
 import { useEffect, useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import Footer from '../footer'
 import s from './styles.module.scss'
-import { SwitchTheme } from 'components'
-import { SetMeta } from 'helpers'
-import metagraph from 'metagraph'
 
 interface main {
   children?: any
   name: keyof typeof metagraph
 }
 
 export default function Main(props: main) {
-  const navigate = useNavigate()
-
   const { name, description, keywords, related, img, type } = metagraph[props.name]
 
   const title = ['MumpUI', type, name].filter(x => x).join(' / ')
@@ -32,13 +30,11 @@ export default function Main(props: main) {
         <div>
           <div className={s.header}>
             <div className={s.row}>
-              <div className={s.icon} onClick={() => window.history.back()}>
-                <span className='icon'>west</span> Back
-              </div>
-
-              <div className={s.icon} onClick={() => navigate('/home')}>
-                <span className='icon'>home</span> Home
-              </div>
+              <Link to='/'>
+                <div className={s.icon}>
+                  <span className='icon'>west</span> Home
+                </div>
+              </Link>
 
               <div className={s.icon}>
                 <SwitchTheme />

diff --git a/src/pages/docs/theme/index.tsx b/src/pages/docs/theme/index.tsx
@@ -1,9 +1,14 @@
 import { Docs } from 'components'
-import { Message } from 'lib'
+import { Message, Radio } from 'lib'
+import { useState } from 'react'
 import * as snippets from './snippets'
 import s from './styles.module.scss'
 
 export default function Main() {
+  const [theme, setTheme] = useState(
+    document.querySelector('body')?.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+  )
+
   return (
     <Docs name='theme'>
       <div className={s.complexity}>
@@ -117,6 +122,20 @@ export default function Main() {
         ]}
       />
 
+      <Docs.Showcase title='Switch theme' code={snippets.s8}>
+        <Radio
+          checked={theme}
+          options={[
+            { key: 'light', label: 'Light' },
+            { key: 'dark', label: 'Dark' }
+          ]}
+          onChange={key => {
+            document.querySelector('body')?.setAttribute('data-theme', key)
+            setTheme(key)
+          }}
+        />
+      </Docs.Showcase>
+
       <Docs.Showcase title='More customizations' code={snippets.s6} lang='css'>
         Elements border radius, border width, dialogs background color, etc.
       </Docs.Showcase>

diff --git a/src/pages/docs/theme/snippets.ts b/src/pages/docs/theme/snippets.ts
@@ -123,8 +123,31 @@ export const s7 = `
   <head>
     ..
   </head>
+
   <body class="mumpui">
-    <div style={{color: 'var(--c-green)'}}>CSS variable example usage</div>
+    <div style={{color: 'var(--c-green)'}}>
+      CSS variable example usage without "mp" prefix.
+    </div>
   </body>
 </html>
 `
+
+export const s8 = `
+const [theme, setTheme] = useState(
+  document.querySelector('body')?.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+)
+
+..
+
+<Radio
+  checked={theme}
+  options={[
+    { key: 'light', label: 'Light' },
+    { key: 'dark', label: 'Dark' }
+  ]}
+  onChange={key => {
+    document.querySelector('body')?.setAttribute('data-theme', key)
+    setTheme(key)
+  }}
+/>
+`