@ducor/react
Version:
admin template ui interface
36 lines (35 loc) • 2.9 kB
JavaScript
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 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";
import Typography from "./typography";
import { Button } from "../components";
import { useAdmin } from "../hooks/use-admin";
const Customizer = () => {
const [selectedTab, setSelectedTab] = useState(null);
// const { t } = useTrans();
const toggleCustomizer = (tabIndex) => {
setSelectedTab(selectedTab === tabIndex ? null : tabIndex);
};
const { adminData } = useAdmin();
const [dragObj, setDragObj] = useState({
isDragStart: false,
isLeft: false,
y: window.innerHeight / 2,
});
return (_jsxs(React.Fragment, { children: [_jsxs(Drawer, { isOpen: selectedTab !== null, onClose: () => setSelectedTab(null), children: [_jsxs(Drawer.Header, { children: [_jsx(Drawer.Title, { className: 'text-16 font-semibold text-gray-800', children: "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 && (_jsx(Flex, { direction: 'col', gap: 5, children: _jsx(Typography, {}) }))] })] }), adminData.OVER_WRITE_LAYOUT ? ("") : (_jsx("div", { className: twMerge(` z-20 fixed`, `flex flex-row ${selectedTab !== null && "bg-opacity-50"}`), style: Object.assign({ top: dragObj.y }, (dragObj.isLeft ? { left: 0 } : { right: 0 })), children: _jsxs("div", { className: `flex flex-col rounded-lg shadow-sm ${selectedTab !== null ? "bg-opacity-50" : ""}`, children: [_jsx(Move, { onChange: (isDragStart, isLeft, y) => {
setDragObj({ isDragStart, isLeft, y });
} }), _jsx("hr", {}), _jsx(Button, { onClick: () => toggleCustomizer(0), color: 'default', active: selectedTab === 0, className: 'z-10', round: 'none', size: 'lg', style: {
bottom: 0,
}, children: _jsx(HiCog, { className: 'h-5 w-5 ', "aria-hidden": 'true' }) }), _jsx("hr", {}), _jsx(Button, { onClick: () => toggleCustomizer(1), color: 'default', active: selectedTab === 1, className: 'z-10', round: 'none', size: 'lg', style: {
bottom: 0,
}, children: _jsx(HiFilter, { className: 'h-5 w-5', "aria-hidden": 'true' }) })] }) }))] }));
};
export default Customizer;