205 lines
12 KiB
TypeScript
205 lines
12 KiB
TypeScript
'use client';
|
|
import { useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { IRootState } from '@/store';
|
|
import { toggleAnimation, toggleLayout, toggleMenu, toggleNavbar, toggleRTL, toggleTheme, toggleSemidark, resetToggleSidebar } from '@/store/themeConfigSlice';
|
|
import IconSettings from '@/components/icon/icon-settings';
|
|
import IconX from '@/components/icon/icon-x';
|
|
import IconSun from '@/components/icon/icon-sun';
|
|
import IconMoon from '@/components/icon/icon-moon';
|
|
import IconLaptop from '@/components/icon/icon-laptop';
|
|
|
|
const Setting = () => {
|
|
const themeConfig = useSelector((state: IRootState) => state.themeConfig);
|
|
const dispatch = useDispatch();
|
|
|
|
const [showCustomizer, setShowCustomizer] = useState(false);
|
|
|
|
return (
|
|
<div>
|
|
<div className={`${(showCustomizer && '!block') || ''} fixed inset-0 z-[51] hidden bg-[black]/60 px-4 transition-[display]`} onClick={() => setShowCustomizer(false)}></div>
|
|
|
|
<nav
|
|
className={`${
|
|
(showCustomizer && 'ltr:!right-0 rtl:!left-0') || ''
|
|
} fixed bottom-0 top-0 z-[51] w-full max-w-[400px] bg-white p-4 shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-[right] duration-300 ltr:-right-[400px] rtl:-left-[400px] dark:bg-black`}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="absolute bottom-0 top-0 my-auto flex h-10 w-12 cursor-pointer items-center justify-center bg-primary text-white ltr:-left-12 ltr:rounded-bl-full ltr:rounded-tl-full rtl:-right-12 rtl:rounded-br-full rtl:rounded-tr-full"
|
|
onClick={() => setShowCustomizer(!showCustomizer)}
|
|
>
|
|
<IconSettings className="h-5 w-5 animate-[spin_3s_linear_infinite]" />
|
|
</button>
|
|
|
|
<div className="perfect-scrollbar h-full overflow-y-auto overflow-x-hidden">
|
|
<div className="relative pb-5 text-center">
|
|
<button type="button" className="absolute top-0 opacity-30 hover:opacity-100 ltr:right-0 rtl:left-0 dark:text-white" onClick={() => setShowCustomizer(false)}>
|
|
<IconX className="h-5 w-5" />
|
|
</button>
|
|
|
|
<h4 className="mb-1 dark:text-white">TEMPLATE CUSTOMIZER</h4>
|
|
<p className="text-white-dark">Set preferences that will be cookied for your live preview demonstration.</p>
|
|
</div>
|
|
|
|
<div className="mb-3 rounded-md border border-dashed border-white-light p-3 dark:border-[#1b2e4b]">
|
|
<h5 className="mb-1 text-base leading-none dark:text-white">Color Scheme</h5>
|
|
<p className="text-xs text-white-dark">Overall light or dark presentation.</p>
|
|
<div className="mt-3 grid grid-cols-3 gap-2">
|
|
<button type="button" className={`${themeConfig.theme === 'light' ? 'btn-primary' : 'btn-outline-primary'} btn`} onClick={() => dispatch(toggleTheme('light'))}>
|
|
<IconSun className="h-5 w-5 shrink-0 ltr:mr-2 rtl:ml-2" />
|
|
Light
|
|
</button>
|
|
|
|
<button type="button" className={`${themeConfig.theme === 'dark' ? 'btn-primary' : 'btn-outline-primary'} btn`} onClick={() => dispatch(toggleTheme('dark'))}>
|
|
<IconMoon className="h-5 w-5 shrink-0 ltr:mr-2 rtl:ml-2" />
|
|
Dark
|
|
</button>
|
|
|
|
<button type="button" className={`${themeConfig.theme === 'system' ? 'btn-primary' : 'btn-outline-primary'} btn`} onClick={() => dispatch(toggleTheme('system'))}>
|
|
<IconLaptop className="h-5 w-5 shrink-0 ltr:mr-2 rtl:ml-2" />
|
|
System
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3 rounded-md border border-dashed border-white-light p-3 dark:border-[#1b2e4b]">
|
|
<h5 className="mb-1 text-base leading-none dark:text-white">Navigation Position</h5>
|
|
<p className="text-xs text-white-dark">Select the primary navigation paradigm for your app.</p>
|
|
<div className="mt-3 grid grid-cols-3 gap-2">
|
|
<button
|
|
type="button"
|
|
className={`${themeConfig.menu === 'horizontal' ? 'btn-primary' : 'btn-outline-primary'} btn`}
|
|
onClick={() => {
|
|
dispatch(toggleMenu('horizontal'));
|
|
dispatch(resetToggleSidebar());
|
|
}}
|
|
>
|
|
Horizontal
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className={`${themeConfig.menu === 'vertical' ? 'btn-primary' : 'btn-outline-primary'} btn`}
|
|
onClick={() => {
|
|
dispatch(toggleMenu('vertical'));
|
|
dispatch(resetToggleSidebar());
|
|
}}
|
|
>
|
|
Vertical
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className={`${themeConfig.menu === 'collapsible-vertical' ? 'btn-primary' : 'btn-outline-primary'} btn`}
|
|
onClick={() => {
|
|
dispatch(toggleMenu('collapsible-vertical'));
|
|
dispatch(resetToggleSidebar());
|
|
}}
|
|
>
|
|
Collapsible
|
|
</button>
|
|
</div>
|
|
<div className="mt-5 text-primary">
|
|
<label className="mb-0 inline-flex">
|
|
<input type="checkbox" className="form-checkbox" checked={themeConfig.semidark} onChange={(e) => dispatch(toggleSemidark(e.target.checked))} />
|
|
<span>Semi Dark (Sidebar & Header)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3 rounded-md border border-dashed border-white-light p-3 dark:border-[#1b2e4b]">
|
|
<h5 className="mb-1 text-base leading-none dark:text-white">Layout Style</h5>
|
|
<p className="text-xs text-white-dark">Select the primary layout style for your app.</p>
|
|
<div className="mt-3 flex gap-2">
|
|
<button
|
|
type="button"
|
|
className={`${themeConfig.layout === 'boxed-layout' ? 'btn-primary' : 'btn-outline-primary'} btn flex-auto`}
|
|
onClick={() => dispatch(toggleLayout('boxed-layout'))}
|
|
>
|
|
Box
|
|
</button>
|
|
|
|
<button type="button" className={`${themeConfig.layout === 'full' ? 'btn-primary' : 'btn-outline-primary'} btn flex-auto`} onClick={() => dispatch(toggleLayout('full'))}>
|
|
Full
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3 rounded-md border border-dashed border-white-light p-3 dark:border-[#1b2e4b]">
|
|
<h5 className="mb-1 text-base leading-none dark:text-white">Direction</h5>
|
|
<p className="text-xs text-white-dark">Select the direction for your app.</p>
|
|
<div className="mt-3 flex gap-2">
|
|
<button type="button" className={`${themeConfig.rtlClass === 'ltr' ? 'btn-primary' : 'btn-outline-primary'} btn flex-auto`} onClick={() => dispatch(toggleRTL('ltr'))}>
|
|
LTR
|
|
</button>
|
|
|
|
<button type="button" className={`${themeConfig.rtlClass === 'rtl' ? 'btn-primary' : 'btn-outline-primary'} btn flex-auto`} onClick={() => dispatch(toggleRTL('rtl'))}>
|
|
RTL
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3 rounded-md border border-dashed border-white-light p-3 dark:border-[#1b2e4b]">
|
|
<h5 className="mb-1 text-base leading-none dark:text-white">Navbar Type</h5>
|
|
<p className="text-xs text-white-dark">Sticky or Floating.</p>
|
|
<div className="mt-3 flex items-center gap-3 text-primary">
|
|
<label className="mb-0 inline-flex">
|
|
<input
|
|
type="radio"
|
|
checked={themeConfig.navbar === 'navbar-sticky'}
|
|
value="navbar-sticky"
|
|
className="form-radio"
|
|
onChange={() => dispatch(toggleNavbar('navbar-sticky'))}
|
|
/>
|
|
<span>Sticky</span>
|
|
</label>
|
|
<label className="mb-0 inline-flex">
|
|
<input
|
|
type="radio"
|
|
checked={themeConfig.navbar === 'navbar-floating'}
|
|
value="navbar-floating"
|
|
className="form-radio"
|
|
onChange={() => dispatch(toggleNavbar('navbar-floating'))}
|
|
/>
|
|
<span>Floating</span>
|
|
</label>
|
|
<label className="mb-0 inline-flex">
|
|
<input
|
|
type="radio"
|
|
checked={themeConfig.navbar === 'navbar-static'}
|
|
value="navbar-static"
|
|
className="form-radio"
|
|
onChange={() => dispatch(toggleNavbar('navbar-static'))}
|
|
/>
|
|
<span>Static</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-3 rounded-md border border-dashed border-white-light p-3 dark:border-[#1b2e4b]">
|
|
<h5 className="mb-1 text-base leading-none dark:text-white">Router Transition</h5>
|
|
<p className="text-xs text-white-dark">Animation of main content.</p>
|
|
<div className="mt-3">
|
|
<select className="form-select border-primary text-primary" value={themeConfig.animation} onChange={(e) => dispatch(toggleAnimation(e.target.value))}>
|
|
<option value=" ">None</option>
|
|
<option value="animate__fadeIn">Fade</option>
|
|
<option value="animate__fadeInDown">Fade Down</option>
|
|
<option value="animate__fadeInUp">Fade Up</option>
|
|
<option value="animate__fadeInLeft">Fade Left</option>
|
|
<option value="animate__fadeInRight">Fade Right</option>
|
|
<option value="animate__slideInDown">Slide Down</option>
|
|
<option value="animate__slideInLeft">Slide Left</option>
|
|
<option value="animate__slideInRight">Slide Right</option>
|
|
<option value="animate__zoomIn">Zoom In</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Setting;
|