@wener/console
Version:
Base console UI toolkit
57 lines (56 loc) • 2.78 kB
JavaScript
import React, { Fragment } from "react";
import { HiChevronDown, HiColorSwatch } from "react-icons/hi";
import { MdSettings } from "react-icons/md";
import { Listbox, Transition } from "@headlessui/react";
import classNames from "clsx";
import { DaisyTheme } from "./DaisyTheme.js";
import { getSupportedThemes } from "./getSupportedThemes.js";
import { ThemePreviewCard } from "./ThemePreviewCard.js";
export const ThemeSelectorButton = () => {
const [state, update] = DaisyTheme.useThemeState();
const { theme } = state;
const setTheme = (v) => {
update({
theme: v
});
};
return /*#__PURE__*/ React.createElement(Listbox, {
value: theme,
onChange: setTheme,
as: "div",
className: "relative inline-block text-left"
}, /*#__PURE__*/ React.createElement(Listbox.Button, {
className: classNames("inline-flex items-center justify-center gap-0.5 rounded-md bg-opacity-20 px-2 py-1 text-sm font-medium hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75", "transition-colors hover:bg-base-200")
}, /*#__PURE__*/ React.createElement(HiColorSwatch, {
className: "h-6 w-6"
}), /*#__PURE__*/ React.createElement("span", {
className: "hidden sm:inline"
}, "\u4E3B\u9898"), /*#__PURE__*/ React.createElement(HiChevronDown, null)), /*#__PURE__*/ React.createElement(Transition, {
as: Fragment,
leave: "transition ease-in duration-100",
leaveFrom: "opacity-100",
leaveTo: "opacity-0"
}, /*#__PURE__*/ React.createElement(Listbox.Options, {
className: classNames("absolute right-0 z-50 flex h-[400px] w-[200px] flex-col gap-2 overflow-y-auto rounded bg-base-200 p-2 text-sm", "border border-base-300 shadow-lg")
}, [
{
label: "\u8DDF\u968F\u7CFB\u7EDF",
value: "system"
},
...getSupportedThemes()
].map((item) => /*#__PURE__*/ React.createElement(Listbox.Option, {
key: item.value,
value: item.value,
"data-theme": item.value,
className: ({ active }) => classNames("cursor-pointer", "rounded p-2", "flex items-center justify-between", "bg-base-100 text-base-content", // 'hover:bg-primary-focus transition-colors',
"border border-transparent", active && "border-primary-focus")
}, ({ selected }) => {
if (item.value === "system") {
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(MdSettings, null), item.label);
}
return /*#__PURE__*/ React.createElement(ThemePreviewCard, {
title: item.value
});
})))));
};
//# sourceMappingURL=ThemeSelectorButton.js.map