@ducor/react
Version:
admin template ui interface
15 lines (14 loc) • 1.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Heading } from "../components";
import Flex from "../components/flex";
import { useThemeMode } from "../hooks";
import CustomizerButton from "./_customizer-button";
const LightDark = () => {
const { currentMode, setThemeMode } = useThemeMode();
// Handle theme mode change
const handleThemeChange = (val) => {
setThemeMode(val);
};
return (_jsxs(Flex, { gap: 2, direction: 'col', children: [_jsx(Heading, { as: 'h4', className: 'underline ', children: "Light & Dark" }), _jsxs("div", { className: 'flex flex-wrap gap-3', children: [_jsx(CustomizerButton, { label: 'Light', value: 'light', activeValue: currentMode, onClick: handleThemeChange }), _jsx(CustomizerButton, { label: 'Dark', value: 'dark', activeValue: currentMode, onClick: handleThemeChange }), _jsx(CustomizerButton, { label: 'System', value: 'system', activeValue: currentMode, onClick: handleThemeChange })] })] }));
};
export default LightDark;