You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { FC } from "react";
|
|
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
|
import { SwitchProps, useSwitch } from "@nextui-org/switch";
|
|
import { useTheme } from "next-themes";
|
|
import {useIsSSR} from "@react-aria/ssr";
|
|
import clsx from "clsx";
|
|
|
|
import { SunFilledIcon, MoonFilledIcon } from "@/components/icons";
|
|
|
|
export interface ThemeSwitchProps {
|
|
className?: string;
|
|
classNames?: SwitchProps["classNames"];
|
|
}
|
|
|
|
export const ThemeSwitch: FC<ThemeSwitchProps> = ({
|
|
className,
|
|
classNames,
|
|
}) => {
|
|
const { theme, setTheme } = useTheme();
|
|
const isSSR = useIsSSR();
|
|
|
|
const onChange = () => {
|
|
theme === "light" ? setTheme("dark") : setTheme("light");
|
|
};
|
|
|
|
const {
|
|
Component,
|
|
slots,
|
|
isSelected,
|
|
getBaseProps,
|
|
getInputProps,
|
|
getWrapperProps,
|
|
} = useSwitch({
|
|
isSelected: theme === "light",
|
|
"aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
|
|
onChange,
|
|
});
|
|
|
|
return (
|
|
<Component
|
|
{...getBaseProps({
|
|
className: clsx(
|
|
"px-px transition-opacity hover:opacity-80 cursor-pointer",
|
|
className,
|
|
classNames?.base
|
|
),
|
|
})}
|
|
>
|
|
<VisuallyHidden>
|
|
<input {...getInputProps()} />
|
|
</VisuallyHidden>
|
|
<div
|
|
{...getWrapperProps()}
|
|
className={slots.wrapper({
|
|
class: clsx(
|
|
[
|
|
"w-auto h-auto",
|
|
"bg-transparent",
|
|
"rounded-lg",
|
|
"flex items-center justify-center",
|
|
"group-data-[selected=true]:bg-transparent",
|
|
"!text-default-500",
|
|
"pt-px",
|
|
"px-0",
|
|
"mx-0",
|
|
],
|
|
classNames?.wrapper
|
|
),
|
|
})}
|
|
>
|
|
{!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
|
|
</div>
|
|
</Component>
|
|
);
|
|
};
|