@ducor/react
Version:
admin template ui interface
48 lines (47 loc) • 4.11 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { HiCog, HiFilter } from "react-icons/hi";
import { twMerge } from "tailwind-merge";
import { useTrans } from "../provider/language";
import { useAdmin } from "../provider/admin";
import Drawer from "../components/drawer";
import Move from "./drag";
import LayoutType from "./_layout-type";
import HeaderType from "./_header-type";
import SidebarType from "./_sidebar-type";
import Flex from "../components/flex";
import LightDark from "./_light-dark";
var Customizer = function () {
var _a = useState(null), selectedTab = _a[0], setSelectedTab = _a[1];
var t = useTrans().t;
var toggleCustomizer = function (tabIndex) {
setSelectedTab(selectedTab === tabIndex ? null : tabIndex);
};
var _b = useAdmin(), adminData = _b.adminData, setAdminData = _b.setAdminData;
var _c = useState({
isDragStart: false,
isLeft: false,
y: window.innerHeight / 2,
}), dragObj = _c[0], setDragObj = _c[1];
return (_jsxs(React.Fragment, { children: [_jsxs(Drawer, { isOpen: selectedTab !== null, onClose: function () { return setSelectedTab(null); }, children: [_jsxs(Drawer.Header, { children: [_jsx(Drawer.Title, { className: 'text-16 font-semibold text-gray-800', children: t("Theme Customizer") }), _jsx(Drawer.SubTitle, { className: 'text-gray-500', children: "Choose your themes & layouts etc." })] }), _jsxs(Drawer.Body, { children: [selectedTab === 0 && (_jsxs(Flex, { direction: 'col', gap: 5, children: [_jsx(LightDark, {}), _jsx(LayoutType, {}), _jsx(HeaderType, {}), _jsx(SidebarType, {})] })), selectedTab === 1 && (_jsxs("div", { className: 'my-3', children: [_jsx("h2", { children: "LAYOUT THEME" }), _jsx("h2", { children: "MIX LAYOUT" }), _jsx("h2", { children: "LAYOUT THEME" })] }))] })] }), adminData.OVER_WRITE_LAYOUT ? ("") : (_jsx("div", { className: twMerge(" z-20 fixed", "flex flex-row ".concat(selectedTab !== null && "bg-opacity-50")), style: __assign({ top: dragObj.y }, (dragObj.isLeft ? { left: 0 } : { right: 0 })), children: _jsxs("div", { className: "flex flex-col rounded-lg shadow-sm ".concat(selectedTab !== null ? "bg-opacity-50" : ""), children: [_jsx(Move, { onChange: function (isDragStart, isLeft, y) {
setDragObj({ isDragStart: isDragStart, isLeft: isLeft, y: y });
} }), _jsx("button", { onClick: function () { return toggleCustomizer(0); }, type: 'button', className: " py-3 px-4 inline-flex items-center text-sm font-medium focus:z-10 border border-gray-200 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:hover:bg-gray-800/95 cursor-pointer ".concat(selectedTab === 0
? "bg-gray-800 text-white"
: "bg-white text-gray-800 dark:bg-gray-800 dark:text-white"), style: {
bottom: 0,
}, children: _jsx(HiCog, { className: 'h-5 w-5', "aria-hidden": 'true' }) }), _jsx("button", { onClick: function () { return toggleCustomizer(1); }, type: 'button', className: "py-3 px-4 inline-flex items-center text-sm font-medium focus:z-10 border border-gray-200 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:hover:bg-gray-800/95 cursor-pointer ".concat(selectedTab === 1
? "bg-gray-800 text-white"
: "bg-white text-gray-800 dark:bg-gray-800 dark:text-white"), children: _jsx(HiFilter, { className: 'h-5 w-5', "aria-hidden": 'true' }) })] }) }))] }));
};
export default Customizer;