46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, { useEffect, useState } from "react"
|
|
import MoonIcon from "@geist-ui/icons/moon"
|
|
import SunIcon from "@geist-ui/icons/sun"
|
|
// import { useAllThemes, useTheme } from '@geist-ui/core'
|
|
import styles from "./header.module.css"
|
|
import { Select } from "@geist-ui/core/dist"
|
|
import { useTheme } from "next-themes"
|
|
|
|
const Controls = () => {
|
|
const [mounted, setMounted] = useState(false)
|
|
const { resolvedTheme, setTheme } = useTheme()
|
|
useEffect(() => setMounted(true), [])
|
|
if (!mounted) return null
|
|
const switchThemes = () => {
|
|
if (resolvedTheme === "dark") {
|
|
setTheme("light")
|
|
} else {
|
|
setTheme("dark")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<Select
|
|
scale={0.5}
|
|
h="28px"
|
|
pure
|
|
onChange={switchThemes}
|
|
value={resolvedTheme}
|
|
>
|
|
<Select.Option value="light">
|
|
<span className={styles.selectContent}>
|
|
<SunIcon size={14} /> Light
|
|
</span>
|
|
</Select.Option>
|
|
<Select.Option value="dark">
|
|
<span className={styles.selectContent}>
|
|
<MoonIcon size={14} /> Dark
|
|
</span>
|
|
</Select.Option>
|
|
</Select>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Controls)
|