CoastalCommitsPastes/client/app/components/header/controls.tsx

37 lines
955 B
TypeScript
Raw Normal View History

2022-04-09 20:48:19 -04:00
import React, { useEffect, useState } from "react"
import MoonIcon from "@geist-ui/icons/moon"
import SunIcon from "@geist-ui/icons/sun"
import styles from "./header.module.css"
2022-11-09 21:38:05 -05:00
import { Select } from "@geist-ui/core/dist"
import { useTheme } from "@components/theme/ThemeClientContextProvider"
2022-03-07 19:54:33 -05:00
const Controls = () => {
const { theme, setTheme } = useTheme()
2022-04-09 20:48:19 -04:00
const switchThemes = () => {
if (theme === "dark") {
2022-04-09 20:48:19 -04:00
setTheme("light")
} else {
setTheme("dark")
}
}
2022-03-07 19:54:33 -05:00
2022-04-09 20:48:19 -04:00
return (
<div className={styles.wrapper}>
2022-11-18 01:36:53 -05:00
<Select scale={0.5} h="28px" pure onChange={switchThemes} value={theme}>
2022-04-09 20:48:19 -04:00
<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>
)
2022-03-07 19:54:33 -05:00
}
2022-04-09 20:48:19 -04:00
export default React.memo(Controls)