import type { ThemeMode } from 'antd-style';
import { CSSProperties, ReactNode, memo, type FC } from 'react';
import { Flexbox } from 'react-layout-kit';
import NativeSelect from '../NativeSelect';
const IconDark = () => (
);
const IconLight = () => (
);
const IconAuto = () => (
);
const Option = ({ icon, label }: { icon: ReactNode; label: ReactNode }) => (
{icon}
{label}
);
const defaultOptions = [
{ label: '跟随系统', icon: , value: 'auto' },
{ label: '亮色模式', icon: , value: 'light' },
{ label: '暗色模式', icon: , value: 'dark' },
];
interface ThemeSwitchProps {
value: ThemeMode;
onChange: (value: ThemeMode) => void;
options?: typeof defaultOptions;
className?: string;
style?: CSSProperties;
title?: string;
}
const ThemeSwitch: FC = ({
value,
onChange,
options = defaultOptions,
className,
style,
...props
}) => {
return (
o.value === value)}
onChange={(index) => {
const mode = options[index].value as unknown as ThemeMode;
onChange(mode);
}}
renderValue={(index) => options[index]?.icon}
renderItem={(item) => item && }
className={className}
style={style}
/>
);
};
export default memo(ThemeSwitch);