crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 15:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
cond0r 2022-11-30 00:29:08 +02:00
parent c76a406aa0
commit 5c6d3a94c8
3 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/components/ui/ThemeSwitcher/ThemeIcon.tsx
View File

@ -1,7 +1,7 @@
import { Moon, Sun, System } from '@components/icons' import { Moon, Sun, System } from '@components/icons'
interface ThemeIconProps { interface ThemeIconProps {
theme: string theme?: string
width: number width: number
height: number height: number
} }

16
site/components/ui/ThemeSwitcher/ThemeSwitcher.tsx
View File

@ -1,19 +1,13 @@
import { useEffect, useState } from 'react' import { useState } from 'react'
import { useTheme } from 'next-themes'
import { ChevronRight, Cross } from '@components/icons' import { ChevronRight, Cross } from '@components/icons'
import { useToggleTheme } from '@lib/hooks/useToggleTheme'
import cn from 'clsx' import cn from 'clsx'
import ClickOutside from '@lib/click-outside' import ClickOutside from '@lib/click-outside'
import ThemeIcon from './ThemeIcon' import ThemeIcon from './ThemeIcon'
const ThemeSwitcher = () => { const ThemeSwitcher = () => {
const [mounted, setMounted] = useState(false)
const [display, setDisplay] = useState(false) const [display, setDisplay] = useState(false)
const { theme, themes, setTheme } = useTheme() const { theme, themes, setTheme } = useToggleTheme()
useEffect(() => setMounted(true), [])
if (!mounted) return null
return ( return (
<ClickOutside active={display} onClick={() => setDisplay(false)}> <ClickOutside active={display} onClick={() => setDisplay(false)}>
@ -24,12 +18,12 @@ const ThemeSwitcher = () => {
> >
<button <button
className={ className={
'h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear space-x-2 hover:border-accent-3 hover:shadow-sm' 'h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear hover:border-accent-3 hover:shadow-sm'
} }
aria-label="Theme Switcher" aria-label="Theme Switcher"
> >
<ThemeIcon width={20} height={20} theme={theme} /> <ThemeIcon width={20} height={20} theme={theme} />
<span className="capitalize">{theme}</span> <span className="capitalize leading-0 ml-2">{theme}</span>
<span className="cursor-pointer"> <span className="cursor-pointer">
<ChevronRight <ChevronRight
className={cn('transition duration-300', { className={cn('transition duration-300', {

10
site/lib/hooks/useToggleTheme.ts Normal file
View File

@ -0,0 +1,10 @@
import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'
export const useToggleTheme = () => {
const { theme, themes, setTheme } = useTheme()
const [themeValue, setThemeValue] = useState<string>()
useEffect(() => setThemeValue(theme), [theme])
return { theme: themeValue, setTheme, themes }
}