@lobehub/ui/es/ThemeSwitch/ThemeSwitch.js

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import { Select } from 'antd';
import { Monitor, Moon, Sun } from 'lucide-react';
import { memo, useMemo } from 'react';
import { Flexbox } from 'react-layout-kit';
import ActionIcon from "../ActionIcon";
import Dropdown from "../Dropdown";
import Icon from "../Icon";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var DEFAULT_ICON_SET = {
  auto: Monitor,
  dark: Moon,
  light: Sun
};
var ThemeSwitch = /*#__PURE__*/memo(function (_ref) {
  var _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'middle' : _ref$size,
    themeMode = _ref.themeMode,
    onThemeSwitch = _ref.onThemeSwitch,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'icon' : _ref$type,
    _ref$labels = _ref.labels,
    labels = _ref$labels === void 0 ? {
      auto: 'System',
      dark: 'Dark',
      light: 'Light'
    } : _ref$labels,
    className = _ref.className,
    variant = _ref.variant,
    style = _ref.style;
  var items = useMemo(function () {
    return [{
      icon: DEFAULT_ICON_SET.auto,
      key: 'auto',
      label: labels.auto
    }, {
      icon: DEFAULT_ICON_SET.light,
      key: 'light',
      label: labels.light
    }, {
      icon: DEFAULT_ICON_SET.dark,
      key: 'dark',
      label: labels.dark
    }];
  }, [labels]);
  return type === 'select' ? /*#__PURE__*/_jsx(Select, {
    className: className,
    defaultValue: themeMode,
    onChange: onThemeSwitch,
    options: items.map(function (item) {
      return {
        label: /*#__PURE__*/_jsxs(Flexbox, {
          align: 'center',
          gap: 8,
          horizontal: true,
          children: [/*#__PURE__*/_jsx(Icon, {
            icon: item.icon
          }), item.label]
        }),
        value: item.key
      };
    }),
    style: style,
    variant: variant
  }) : /*#__PURE__*/_jsx(Dropdown, {
    menu: {
      items: items,
      onClick: function onClick(e) {
        return onThemeSwitch(e.key);
      }
    },
    trigger: ['click'],
    children: /*#__PURE__*/_jsx(ActionIcon, {
      className: className,
      icon: DEFAULT_ICON_SET[themeMode],
      size: size,
      style: style,
      variant: variant
    })
  });
});
ThemeSwitch.displayName = 'ThemeSwitch';
export default ThemeSwitch;