|
| 1 | +/** |
| 2 | + * MIT License |
| 3 | + * |
| 4 | + * Copyright (c) 2024, Brion Mario |
| 5 | + * |
| 6 | + * Permission is hereby granted, free of charge, to any person obtaining a copy |
| 7 | + * of this software and associated documentation files (the "Software"), to deal |
| 8 | + * in the Software without restriction, including without limitation the rights |
| 9 | + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 10 | + * copies of the Software, and to permit persons to whom the Software is |
| 11 | + * furnished to do so, subject to the following conditions: |
| 12 | + * |
| 13 | + * The above copyright notice and this permission notice shall be included in all |
| 14 | + * copies or substantial portions of the Software. |
| 15 | + * |
| 16 | + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 17 | + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 18 | + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 19 | + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 20 | + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 21 | + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
| 22 | + * SOFTWARE. |
| 23 | + */ |
| 24 | + |
| 25 | +import {cn} from '@/lib/utils'; |
| 26 | +import {useTheme} from 'next-themes'; |
| 27 | +import Button, {ButtonProps} from '@/components/Button'; |
| 28 | +import {TestableComponent} from '@/types/dom'; |
| 29 | +import {ForwardedRef, forwardRef, ForwardRefExoticComponent, PropsWithChildren, ReactElement} from 'react'; |
| 30 | +import {Theme} from '@/types/theme'; |
| 31 | +import MoonIcon from '@/icons/MoonIcon'; |
| 32 | +import SunIcon from '@/icons/SunIcon'; |
| 33 | + |
| 34 | +/** |
| 35 | + * The `ThemeSwitchProps` interface represents the props accepted by the `ThemeSwitch` component. |
| 36 | + */ |
| 37 | +export type ThemeSwitchProps = ButtonProps & |
| 38 | + TestableComponent & |
| 39 | + PropsWithChildren<{ |
| 40 | + /** |
| 41 | + * The variant of the theme switch component. |
| 42 | + * It can be either `'icon'` or `'labelled'`. |
| 43 | + * |
| 44 | + * @defaultValue `'icon'` |
| 45 | + */ |
| 46 | + variant?: 'icon' | 'labelled'; |
| 47 | + }>; |
| 48 | + |
| 49 | +/** |
| 50 | + * `ThemeSwitch` is a React component that allows users to toggle between light and dark themes. |
| 51 | + * |
| 52 | + * @example |
| 53 | + * ```jsx |
| 54 | + * <ThemeSwitch variant="icon" className="my-4" />; |
| 55 | + * ``` |
| 56 | + * |
| 57 | + * @param props - Props for the component. |
| 58 | + * @returns ThemeSwitch as a React component. |
| 59 | + */ |
| 60 | +const ThemeSwitch: ForwardRefExoticComponent<ThemeSwitchProps> = forwardRef( |
| 61 | + ( |
| 62 | + {children, className, variant = 'icon', bordered, ...rest}: ThemeSwitchProps, |
| 63 | + ref: ForwardedRef<HTMLButtonElement>, |
| 64 | + ): ReactElement => { |
| 65 | + const {resolvedTheme, setTheme} = useTheme(); |
| 66 | + |
| 67 | + return ( |
| 68 | + <Button |
| 69 | + ref={ref} |
| 70 | + type="button" |
| 71 | + onClick={(): void => { |
| 72 | + setTheme(resolvedTheme === Theme.DARK ? Theme.LIGHT : Theme.DARK); |
| 73 | + }} |
| 74 | + className={cn( |
| 75 | + 'inline-flex h-14 items-center justify-center overflow-hidden rounded-full p-1 transition', |
| 76 | + { |
| 77 | + 'border-secondary hover:border-primary focus:border-primary border-2 focus:outline-none': bordered, |
| 78 | + 'w-14': variant === 'icon', |
| 79 | + 'px-8': variant === 'labelled', |
| 80 | + }, |
| 81 | + className, |
| 82 | + )} |
| 83 | + size="icon" |
| 84 | + {...rest} |
| 85 | + > |
| 86 | + <div className="relative h-8 w-8"> |
| 87 | + <span |
| 88 | + className="absolute inset-0 rotate-90 transform text-gray-500 hover:text-black transition duration-1000 motion-reduce:duration-[0s] dark:rotate-0 dark:hover:text-white dark:text-slate-500" |
| 89 | + style={{transformOrigin: '50% 100px'}} |
| 90 | + > |
| 91 | + <MoonIcon height={32} width={32} /> |
| 92 | + </span> |
| 93 | + <span |
| 94 | + className="absolute inset-0 rotate-0 transform text-gray-500 hover:text-black transition duration-1000 motion-reduce:duration-[0s] dark:-rotate-90 dark:hover:text-white dark:text-slate-500" |
| 95 | + style={{transformOrigin: '50% 100px'}} |
| 96 | + > |
| 97 | + <SunIcon height={32} width={32} /> |
| 98 | + </span> |
| 99 | + </div> |
| 100 | + </Button> |
| 101 | + ); |
| 102 | + }, |
| 103 | +); |
| 104 | + |
| 105 | +export default ThemeSwitch; |
0 commit comments