@admin-layout/tailwind-design-pro 10.0.9-alpha.65 → 10.0.9-alpha.66

package/lib/components/SettingDrawer/RegionalSettings.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {useTranslation}from'react-i18next';import {Switch}from'./Switch/index.js';import {SearchBarBehavior}from'../../machines/types.js';import {config}from'../../config/env-config.js';function RegionalSettings(props) {
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import*as React from'react';import {useTranslation}from'react-i18next';import {Switch}from'./Switch/index.js';import {SearchBarBehavior}from'../../machines/types.js';import {config}from'../../config/env-config.js';function RegionalSettings(props) {
   const {
     t
   } = useTranslation('settings');
@@ -15,14 +15,10 @@ import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {use
     regions = {}
   } = settings?.routeSettings?.[currentRoute] || {};
   const [isHeaderExpanded, setIsHeaderExpanded] = React.useState(false);
-  const contentRef = React.useRef(null);
-  const [contentHeight, setContentHeight] = React.useState(0);
+  const [isBackgroundExpanded, setIsBackgroundExpanded] = React.useState(true);
+  const [activeBackgroundTab, setActiveBackgroundTab] = React.useState('desktop');
+  const [activeHeaderTab, setActiveHeaderTab] = React.useState('desktop');
   const scrollThresholdConfig = JSON.parse(config.SCROLL_THRESHOLD);
-  React.useEffect(() => {
-    if (contentRef.current) {
-      setContentHeight(contentRef.current.scrollHeight);
-    }
-  }, [regions.desktop?.header?.showHeader, regions.mobile?.header?.showHeader]);
   const handleRegionChange = (key, value) => {
     if (!changeSetting) return;
     changeSetting(`routeSettings.${currentRoute}.regions`, {
@@ -30,6 +26,46 @@ import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {use
       [key]: value
     });
   };
+  const handleDesktopBackgroundChange = (property, value) => {
+    if (!changeSetting) return;
+    const desktopBackground = regions.desktop?.background || {
+      type: 'color',
+      color: 'inherit',
+      image: '',
+      video: '',
+      videoThumbnail: ''
+    };
+    changeSetting(`routeSettings.${currentRoute}.regions`, {
+      ...regions,
+      desktop: {
+        ...regions.desktop,
+        background: {
+          ...desktopBackground,
+          [property]: value
+        }
+      }
+    });
+  };
+  const handleMobileBackgroundChange = (property, value) => {
+    if (!changeSetting) return;
+    const mobileBackground = regions.mobile?.background || {
+      type: 'color',
+      color: 'inherit',
+      image: '',
+      video: '',
+      videoThumbnail: ''
+    };
+    changeSetting(`routeSettings.${currentRoute}.regions`, {
+      ...regions,
+      mobile: {
+        ...regions.mobile,
+        background: {
+          ...mobileBackground,
+          [property]: value
+        }
+      }
+    });
+  };
   const handleDesktopHeaderChange = (element, value) => {
     if (!changeSetting) return;
     const desktopHeader = regions.desktop?.header || {
@@ -43,6 +79,9 @@ import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {use
       position: 'fixed',
       height: '64px',
       backgroundColor: 'inherit',
+      backgroundType: 'color',
+      backgroundImage: '',
+      backgroundVideo: '',
       elevation: 2,
       showHeader: true,
       showMenu: true,
@@ -77,6 +116,9 @@ import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {use
       position: 'fixed',
       height: '56px',
       backgroundColor: 'inherit',
+      backgroundType: 'color',
+      backgroundImage: '',
+      backgroundVideo: '',
       elevation: 2,
       showHeader: true,
       showMenu: true,
@@ -109,6 +151,9 @@ import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {use
     position: 'fixed',
     height: '64px',
     backgroundColor: 'inherit',
+    backgroundType: 'color',
+    backgroundImage: '',
+    backgroundVideo: '',
     elevation: 2,
     showHeader: true,
     showMenu: true,
@@ -130,6 +175,9 @@ import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {use
     position: 'fixed',
     height: '56px',
     backgroundColor: 'inherit',
+    backgroundType: 'color',
+    backgroundImage: '',
+    backgroundVideo: '',
     elevation: 2,
     showHeader: true,
     showMenu: true,
@@ -140,395 +188,663 @@ import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {use
     scrollThreshold: 50,
     fixedHeader: false
   };
-  return jsxs("div", {
-    children: [jsx("div", {
-      className: "flex items-center mb-2",
-      children: jsxs("button", {
-        onClick: () => setIsHeaderExpanded(!isHeaderExpanded),
-        className: "flex items-center gap-2 hover:opacity-80 transition-all duration-200",
-        children: [jsx("svg", {
-          className: `w-4 h-4 transition-transform duration-300 ease-in-out ${isHeaderExpanded ? 'rotate-180' : ''}`,
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          children: jsx("path", {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: 2,
-            d: "M19 9l-7 7-7-7"
+  const desktopBackground = regions.desktop?.background || {
+    type: 'color',
+    color: 'inherit',
+    image: '',
+    video: '',
+    videoThumbnail: ''
+  };
+  const mobileBackground = regions.mobile?.background || {
+    type: 'color',
+    color: 'inherit',
+    image: '',
+    video: '',
+    videoThumbnail: ''
+  };
+  // Helper function to render background settings based on current active tab
+  const renderBackgroundSettings = () => {
+    const isDesktop = activeBackgroundTab === 'desktop';
+    const background = isDesktop ? desktopBackground : mobileBackground;
+    const handleBackgroundChange = isDesktop ? handleDesktopBackgroundChange : handleMobileBackgroundChange;
+    return jsxs(Fragment, {
+      children: [jsxs("div", {
+        className: "mb-4",
+        children: [jsx("p", {
+          className: "font-medium mb-2",
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('background_type')
+        }), jsxs("div", {
+          className: "flex mb-3 rounded-lg overflow-hidden border border-gray-200 divide-x divide-gray-200 bg-gray-50",
+          children: [jsxs("button", {
+            className: `flex-1 py-2 px-3 text-sm font-medium transition-colors duration-200 flex items-center justify-center ${background.type === 'color' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'}`,
+            onClick: () => handleBackgroundChange('type', 'color'),
+            children: [jsx("span", {
+              className: "mr-1",
+              children: jsxs("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [jsx("circle", {
+                  cx: "12",
+                  cy: "12",
+                  r: "10"
+                }), jsx("path", {
+                  d: "M12 8v8M8 12h8"
+                })]
+              })
+            }), t('color')]
+          }), jsxs("button", {
+            className: `flex-1 py-2 px-3 text-sm font-medium transition-colors duration-200 flex items-center justify-center ${background.type === 'image' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'}`,
+            onClick: () => handleBackgroundChange('type', 'image'),
+            children: [jsx("span", {
+              className: "mr-1",
+              children: jsxs("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [jsx("rect", {
+                  x: "3",
+                  y: "3",
+                  width: "18",
+                  height: "18",
+                  rx: "2",
+                  ry: "2"
+                }), jsx("circle", {
+                  cx: "8.5",
+                  cy: "8.5",
+                  r: "1.5"
+                }), jsx("polyline", {
+                  points: "21 15 16 10 5 21"
+                })]
+              })
+            }), t('image')]
+          }), jsxs("button", {
+            className: `flex-1 py-2 px-3 text-sm font-medium transition-colors duration-200 flex items-center justify-center ${background.type === 'video' ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'}`,
+            onClick: () => handleBackgroundChange('type', 'video'),
+            children: [jsx("span", {
+              className: "mr-1",
+              children: jsxs("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [jsx("polygon", {
+                  points: "23 7 16 12 23 17 23 7"
+                }), jsx("rect", {
+                  x: "1",
+                  y: "5",
+                  width: "15",
+                  height: "14",
+                  rx: "2",
+                  ry: "2"
+                })]
+              })
+            }), t('video')]
+          })]
+        })]
+      }), background.type === 'color' && jsxs("div", {
+        className: "mb-4",
+        children: [jsx("p", {
+          className: "mb-2",
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('background_color')
+        }), jsxs("div", {
+          className: "flex items-center",
+          children: [jsx("div", {
+            className: "w-12 h-12 rounded-lg border border-gray-300 mr-3 flex-shrink-0 shadow-sm",
+            style: {
+              backgroundColor: background.color === 'inherit' ? '#ffffff' : background.color || '#ffffff'
+            }
+          }), jsx("div", {
+            className: "flex-grow",
+            children: jsx("input", {
+              type: "color",
+              value: background.color === 'inherit' ? '#ffffff' : background.color || '#ffffff',
+              onChange: e => handleBackgroundChange('color', e.target.value),
+              className: "w-full h-10 rounded cursor-pointer"
+            })
+          })]
+        }), jsx("div", {
+          className: "flex flex-wrap gap-2 mt-3",
+          children: ['#ffffff', '#f2f2f2', '#e6e6e6', '#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'].map(color => jsx("button", {
+            className: `w-8 h-8 rounded-full border ${color === (background.color || '#ffffff') ? 'border-blue-500 border-2' : 'border-gray-300'}`,
+            style: {
+              backgroundColor: color
+            },
+            onClick: () => handleBackgroundChange('color', color),
+            "aria-label": `Select color ${color}`
+          }, color))
+        })]
+      }), background.type === 'image' && jsxs("div", {
+        className: "mb-2",
+        children: [jsx("div", {
+          className: "flex items-center mb-1",
+          children: jsx("p", {
+            style: {
+              color: navTheme === 'dark' ? '#ffff' : 'black'
+            },
+            children: t('image_url')
+          })
+        }), jsx("input", {
+          type: "text",
+          placeholder: t('image_url'),
+          value: background.image || '',
+          onChange: e => handleBackgroundChange('image', e.target.value),
+          className: "w-full p-1 text-sm border border-gray-300 rounded"
+        }), background.image && jsx("div", {
+          className: "mt-2 p-1 border border-gray-300 rounded",
+          children: jsx("img", {
+            src: background.image,
+            alt: "Background preview",
+            className: "w-full h-24 object-cover",
+            onError: e => {
+              const target = e.target;
+              target.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSIxLjUiPjwvY2lyY2xlPjxwb2x5bGluZSBwb2ludHM9IjIxIDEzLjg1IDE2IDEwLjk4IDgiIDE1Ij48L3BvbHlsaW5lPjwvc3ZnPg==';
+            }
+          })
+        })]
+      }), background.type === 'video' && jsxs("div", {
+        className: "mb-2",
+        children: [jsx("div", {
+          className: "flex items-center mb-1",
+          children: jsx("p", {
+            style: {
+              color: navTheme === 'dark' ? '#ffff' : 'black'
+            },
+            children: t('video_url')
+          })
+        }), jsx("input", {
+          type: "text",
+          placeholder: t('video_url'),
+          value: background.video || '',
+          onChange: e => handleBackgroundChange('video', e.target.value),
+          className: "w-full p-1 text-sm border border-gray-300 rounded"
+        }), jsx("div", {
+          className: "flex items-center mt-3 mb-1",
+          children: jsx("p", {
+            style: {
+              color: navTheme === 'dark' ? '#ffff' : 'black'
+            },
+            children: t('video_thumbnail')
           })
-        }), jsx("p", {
+        }), jsx("input", {
+          type: "text",
+          placeholder: t('video_thumbnail'),
+          value: background.videoThumbnail || '',
+          onChange: e => handleBackgroundChange('videoThumbnail', e.target.value),
+          className: "w-full p-1 text-sm border border-gray-300 rounded"
+        }), jsxs("div", {
+          className: "flex flex-wrap gap-2 mt-3",
+          children: [background.video && jsx("div", {
+            className: "mt-2 p-1 border border-gray-300 rounded w-full",
+            children: jsx("video", {
+              src: background.video,
+              controls: true,
+              className: "w-full h-24 object-cover",
+              poster: background.videoThumbnail || ''
+            })
+          }), !background.video && background.videoThumbnail && jsx("div", {
+            className: "mt-2 p-1 border border-gray-300 rounded w-full",
+            children: jsx("img", {
+              src: background.videoThumbnail,
+              alt: "Video thumbnail preview",
+              className: "w-full h-24 object-cover",
+              onError: e => {
+                const target = e.target;
+                target.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5Z29uIHBvaW50cz0iMjMgNyAxNiAxMiAyMyAxNyAyMyA3Ij48L3BvbHlnb24+PHJlY3QgeD0iMSIgeT0iNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE0IiByeD0iMiIgcnk9IjIiPjwvcmVjdD48L3N2Zz4=';
+              }
+            })
+          })]
+        })]
+      })]
+    });
+  };
+  // Helper function to render header settings based on current active tab
+  const renderHeaderSettings = () => {
+    const isDesktop = activeHeaderTab === 'desktop';
+    const header = isDesktop ? desktopHeader : mobileHeader;
+    const handleHeaderChange = isDesktop ? handleDesktopHeaderChange : handleMobileHeaderChange;
+    return jsxs("div", {
+      className: "space-y-2",
+      children: [jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('show_header')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: isDesktop ? regions.desktop?.header?.showHeader ?? true : regions.mobile?.header?.showHeader ?? true,
+          onChange: checked => handleHeaderChange('showHeader', checked)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('fixed_header')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.fixedHeader,
+          onChange: checked => handleHeaderChange('fixedHeader', checked)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
           style: {
             color: navTheme === 'dark' ? '#ffff' : 'black'
           },
-          children: t('header')
+          children: t('show_logo')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.showLogo,
+          onChange: checked => handleHeaderChange('showLogo', checked)
         })]
-      })
-    }), jsx("div", {
-      ref: contentRef,
-      className: "overflow-hidden transition-all duration-300 ease-in-out",
-      style: {
-        maxHeight: isHeaderExpanded ? `${contentHeight + 50}px` : '0px',
-        opacity: isHeaderExpanded ? 1 : 0
-      },
-      children: jsxs("div", {
-        className: "ml-4 mb-4 border-l-2 border-gray-200 pl-4",
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('show_search_slot')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.showSearchSlot,
+          onChange: checked => handleHeaderChange('showSearchSlot', checked)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('show_right_content')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.showRightContent,
+          onChange: checked => handleHeaderChange('showRightContent', checked)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('show_menu_toggle')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.showMenuToggle,
+          onChange: checked => handleHeaderChange('showMenuToggle', checked)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('show_back_button')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.showBackButton,
+          onChange: checked => handleHeaderChange('showBackButton', checked)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('show_page_title')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.showPageTitle,
+          onChange: checked => handleHeaderChange('showPageTitle', checked)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('show_action_buttons')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.showActionButtons,
+          onChange: checked => handleHeaderChange('showActionButtons', checked)
+        })]
+      })]
+    });
+  };
+  // Helper function to render search bar settings based on current active tab
+  const renderSearchBarSettings = () => {
+    const isDesktop = activeHeaderTab === 'desktop';
+    const header = isDesktop ? desktopHeader : mobileHeader;
+    const handleHeaderChange = isDesktop ? handleDesktopHeaderChange : handleMobileHeaderChange;
+    return jsxs("div", {
+      className: "space-y-2",
+      children: [jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('search_bar')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.searchBarRender,
+          onChange: checked => handleHeaderChange('searchBarRender', checked)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('search_bar_on_scroll')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.searchBarBehavior === SearchBarBehavior.ON_SCROLL,
+          onChange: checked => handleHeaderChange('searchBarBehavior', checked ? SearchBarBehavior.ON_SCROLL : SearchBarBehavior.PERMANENT)
+        })]
+      }), jsxs("div", {
+        className: "flex items-center",
+        children: [jsx("p", {
+          style: {
+            color: navTheme === 'dark' ? '#ffff' : 'black'
+          },
+          children: t('search_bar_overlay')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header.searchBarOverlay,
+          onChange: checked => handleHeaderChange('searchBarOverlay', checked)
+        })]
+      }), jsxs("div", {
+        className: "mb-4",
         children: [jsxs("div", {
-          className: "mb-4",
+          className: "flex items-center justify-between mb-2",
           children: [jsx("p", {
-            className: "font-medium mb-2",
             style: {
               color: navTheme === 'dark' ? '#ffff' : 'black'
             },
-            children: t('desktop_settings')
+            children: t('scroll_threshold')
+          }), jsxs("span", {
+            className: "text-sm",
+            style: {
+              color: navTheme === 'dark' ? '#ffff' : 'black'
+            },
+            children: [header.scrollThreshold || scrollThresholdConfig.DEFAULT, "px"]
+          })]
+        }), jsxs("div", {
+          className: "relative",
+          children: [jsx("input", {
+            type: "range",
+            min: scrollThresholdConfig.MIN,
+            max: scrollThresholdConfig.MAX,
+            step: scrollThresholdConfig.STEP,
+            value: header.scrollThreshold || scrollThresholdConfig.DEFAULT,
+            onChange: e => handleHeaderChange('scrollThreshold', parseInt(e.target.value)),
+            className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
           }), jsxs("div", {
-            className: "pl-4 space-y-2",
-            children: [jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_header')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: regions.desktop?.header?.showHeader ?? true,
-                onChange: checked => handleDesktopHeaderChange('showHeader', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('fixed_header')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: desktopHeader.fixedHeader,
-                onChange: checked => handleDesktopHeaderChange('fixedHeader', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_logo')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: desktopHeader.showLogo,
-                onChange: checked => handleDesktopHeaderChange('showLogo', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_search_slot')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: desktopHeader.showSearchSlot,
-                onChange: checked => handleDesktopHeaderChange('showSearchSlot', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_right_content')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: desktopHeader.showRightContent,
-                onChange: checked => handleDesktopHeaderChange('showRightContent', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_menu_toggle')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: desktopHeader.showMenuToggle,
-                onChange: checked => handleDesktopHeaderChange('showMenuToggle', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_back_button')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: desktopHeader.showBackButton,
-                onChange: checked => handleDesktopHeaderChange('showBackButton', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_page_title')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: desktopHeader.showPageTitle,
-                onChange: checked => handleDesktopHeaderChange('showPageTitle', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_action_buttons')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: desktopHeader.showActionButtons,
-                onChange: checked => handleDesktopHeaderChange('showActionButtons', checked)
-              })]
+            className: "flex justify-between text-xs mt-2",
+            children: [jsxs("span", {
+              children: [scrollThresholdConfig.MIN, "px"]
+            }), jsxs("span", {
+              children: [scrollThresholdConfig.MAX / 2, "px"]
+            }), jsxs("span", {
+              children: [scrollThresholdConfig.MAX, "px"]
             })]
           })]
-        }), jsxs("div", {
-          className: "mt-6 mb-4",
-          children: [jsx("p", {
-            className: "font-medium mb-2",
+        })]
+      })]
+    });
+  };
+  return jsxs("div", {
+    children: [jsxs("div", {
+      children: [jsx("div", {
+        className: "flex items-center mb-2",
+        children: jsxs("button", {
+          onClick: () => setIsBackgroundExpanded(!isBackgroundExpanded),
+          className: "flex items-center gap-2 hover:opacity-80 transition-all duration-200",
+          children: [jsx("svg", {
+            className: `w-4 h-4 transition-transform duration-300 ease-in-out ${isBackgroundExpanded ? 'rotate-180' : ''}`,
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M19 9l-7 7-7-7"
+            })
+          }), jsx("p", {
             style: {
               color: navTheme === 'dark' ? '#ffff' : 'black'
             },
-            children: t('mobile_settings')
-          }), jsxs("div", {
-            className: "pl-4 space-y-2",
+            children: t('background')
+          })]
+        })
+      }), jsx("div", {
+        className: `grid transition-all duration-300 ease-in-out ${isBackgroundExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`,
+        children: jsx("div", {
+          className: "overflow-hidden",
+          children: jsxs("div", {
+            className: "ml-4 mb-4 border-l-2 border-gray-200 pl-4",
             children: [jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_header')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: regions.mobile?.header?.showHeader ?? true,
-                onChange: checked => handleMobileHeaderChange('showHeader', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('fixed_header')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: mobileHeader.fixedHeader,
-                onChange: checked => handleMobileHeaderChange('fixedHeader', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_logo')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: mobileHeader.showLogo,
-                onChange: checked => handleMobileHeaderChange('showLogo', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_search_slot')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: mobileHeader.showSearchSlot,
-                onChange: checked => handleMobileHeaderChange('showSearchSlot', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_right_content')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: mobileHeader.showRightContent,
-                onChange: checked => handleMobileHeaderChange('showRightContent', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_menu_toggle')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: mobileHeader.showMenuToggle,
-                onChange: checked => handleMobileHeaderChange('showMenuToggle', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_back_button')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: mobileHeader.showBackButton,
-                onChange: checked => handleMobileHeaderChange('showBackButton', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_page_title')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: mobileHeader.showPageTitle,
-                onChange: checked => handleMobileHeaderChange('showPageTitle', checked)
-              })]
-            }), jsxs("div", {
-              className: "flex items-center",
-              children: [jsx("p", {
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('show_action_buttons')
-              }), jsx("div", {
-                className: "flex-grow"
-              }), jsx(Switch, {
-                value: mobileHeader.showActionButtons,
-                onChange: checked => handleMobileHeaderChange('showActionButtons', checked)
+              className: "flex mb-4 mt-1",
+              children: [jsx("button", {
+                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-l-lg border border-r-0 border-gray-300 ${activeBackgroundTab === 'desktop' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50'}`,
+                onClick: () => setActiveBackgroundTab('desktop'),
+                children: jsxs("span", {
+                  className: "flex items-center justify-center",
+                  children: [jsxs("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "mr-1",
+                    children: [jsx("rect", {
+                      x: "2",
+                      y: "3",
+                      width: "20",
+                      height: "14",
+                      rx: "2",
+                      ry: "2"
+                    }), jsx("line", {
+                      x1: "8",
+                      y1: "21",
+                      x2: "16",
+                      y2: "21"
+                    }), jsx("line", {
+                      x1: "12",
+                      y1: "17",
+                      x2: "12",
+                      y2: "21"
+                    })]
+                  }), t('desktop_tab')]
+                })
+              }), jsx("button", {
+                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-r-lg border border-gray-300 ${activeBackgroundTab === 'mobile' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50'}`,
+                onClick: () => setActiveBackgroundTab('mobile'),
+                children: jsxs("span", {
+                  className: "flex items-center justify-center",
+                  children: [jsxs("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "mr-1",
+                    children: [jsx("rect", {
+                      x: "5",
+                      y: "2",
+                      width: "14",
+                      height: "20",
+                      rx: "2",
+                      ry: "2"
+                    }), jsx("line", {
+                      x1: "12",
+                      y1: "18",
+                      x2: "12",
+                      y2: "18"
+                    })]
+                  }), t('mobile_tab')]
+                })
               })]
+            }), jsx("div", {
+              className: "mb-4",
+              children: renderBackgroundSettings()
             })]
-          })]
-        }), jsxs("div", {
-          className: "mt-6 mb-4",
-          children: [jsx("p", {
-            className: "font-medium mb-2",
+          })
+        })
+      })]
+    }), jsxs("div", {
+      children: [jsx("div", {
+        className: "flex items-center mb-2",
+        children: jsxs("button", {
+          onClick: () => setIsHeaderExpanded(!isHeaderExpanded),
+          className: "flex items-center gap-2 hover:opacity-80 transition-all duration-200",
+          children: [jsx("svg", {
+            className: `w-4 h-4 transition-transform duration-300 ease-in-out ${isHeaderExpanded ? 'rotate-180' : ''}`,
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: jsx("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M19 9l-7 7-7-7"
+            })
+          }), jsx("p", {
             style: {
               color: navTheme === 'dark' ? '#ffff' : 'black'
             },
-            children: t('search_bar')
-          }), jsxs("div", {
-            className: "pl-4 space-y-2",
+            children: t('header')
+          })]
+        })
+      }), jsx("div", {
+        className: `grid transition-all duration-300 ease-in-out ${isHeaderExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'}`,
+        children: jsx("div", {
+          className: "overflow-hidden",
+          children: jsxs("div", {
+            className: "ml-4 mb-4 border-l-2 border-gray-200 pl-4",
             children: [jsxs("div", {
-              className: "mb-4",
-              children: [jsx("p", {
-                className: "font-medium mb-2",
-                style: {
-                  color: navTheme === 'dark' ? '#ffff' : 'black'
-                },
-                children: t('desktop_settings')
-              }), jsxs("div", {
-                className: "pl-4 space-y-2",
-                children: [jsxs("div", {
-                  className: "flex items-center",
-                  children: [jsx("p", {
-                    style: {
-                      color: navTheme === 'dark' ? '#ffff' : 'black'
-                    },
-                    children: t('search_bar')
-                  }), jsx("div", {
-                    className: "flex-grow"
-                  }), jsx(Switch, {
-                    value: desktopHeader.searchBarRender,
-                    onChange: checked => handleDesktopHeaderChange('searchBarRender', checked)
-                  })]
-                }), jsxs("div", {
-                  className: "flex items-center",
-                  children: [jsx("p", {
-                    style: {
-                      color: navTheme === 'dark' ? '#ffff' : 'black'
-                    },
-                    children: t('search_bar_on_scroll')
-                  }), jsx("div", {
-                    className: "flex-grow"
-                  }), jsx(Switch, {
-                    value: desktopHeader.searchBarBehavior === SearchBarBehavior.ON_SCROLL,
-                    onChange: checked => handleDesktopHeaderChange('searchBarBehavior', checked ? SearchBarBehavior.ON_SCROLL : SearchBarBehavior.PERMANENT)
-                  })]
-                }), jsxs("div", {
-                  className: "flex items-center",
-                  children: [jsx("p", {
-                    style: {
-                      color: navTheme === 'dark' ? '#ffff' : 'black'
-                    },
-                    children: t('search_bar_overlay')
-                  }), jsx("div", {
-                    className: "flex-grow"
-                  }), jsx(Switch, {
-                    value: desktopHeader.searchBarOverlay,
-                    onChange: checked => handleDesktopHeaderChange('searchBarOverlay', checked)
-                  })]
-                }), jsxs("div", {
-                  className: "mb-4",
-                  children: [jsxs("div", {
-                    className: "flex items-center justify-between mb-2",
-                    children: [jsx("p", {
-                      style: {
-                        color: navTheme === 'dark' ? '#ffff' : 'black'
-                      },
-                      children: t('scroll_threshold')
-                    }), jsxs("span", {
-                      className: "text-sm",
-                      style: {
-                        color: navTheme === 'dark' ? '#ffff' : 'black'
-                      },
-                      children: [desktopHeader.scrollThreshold || scrollThresholdConfig.DEFAULT, "px"]
+              className: "flex mb-4 mt-1",
+              children: [jsx("button", {
+                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-l-lg border border-r-0 border-gray-300 ${activeHeaderTab === 'desktop' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50'}`,
+                onClick: () => setActiveHeaderTab('desktop'),
+                children: jsxs("span", {
+                  className: "flex items-center justify-center",
+                  children: [jsxs("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "mr-1",
+                    children: [jsx("rect", {
+                      x: "2",
+                      y: "3",
+                      width: "20",
+                      height: "14",
+                      rx: "2",
+                      ry: "2"
+                    }), jsx("line", {
+                      x1: "8",
+                      y1: "21",
+                      x2: "16",
+                      y2: "21"
+                    }), jsx("line", {
+                      x1: "12",
+                      y1: "17",
+                      x2: "12",
+                      y2: "21"
                     })]
-                  }), jsxs("div", {
-                    className: "relative",
-                    children: [jsx("input", {
-                      type: "range",
-                      min: scrollThresholdConfig.MIN,
-                      max: scrollThresholdConfig.MAX,
-                      step: scrollThresholdConfig.STEP,
-                      value: desktopHeader.scrollThreshold || scrollThresholdConfig.DEFAULT,
-                      onChange: e => handleDesktopHeaderChange('scrollThreshold', parseInt(e.target.value)),
-                      className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
-                    }), jsxs("div", {
-                      className: "flex justify-between text-xs mt-2",
-                      children: [jsxs("span", {
-                        children: [scrollThresholdConfig.MIN, "px"]
-                      }), jsxs("span", {
-                        children: [scrollThresholdConfig.MAX / 2, "px"]
-                      }), jsxs("span", {
-                        children: [scrollThresholdConfig.MAX, "px"]
-                      })]
+                  }), t('desktop_tab')]
+                })
+              }), jsx("button", {
+                className: `flex-1 py-2 px-4 text-sm font-medium transition-colors duration-200 rounded-r-lg border border-gray-300 ${activeHeaderTab === 'mobile' ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-700 hover:bg-gray-50'}`,
+                onClick: () => setActiveHeaderTab('mobile'),
+                children: jsxs("span", {
+                  className: "flex items-center justify-center",
+                  children: [jsxs("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "mr-1",
+                    children: [jsx("rect", {
+                      x: "5",
+                      y: "2",
+                      width: "14",
+                      height: "20",
+                      rx: "2",
+                      ry: "2"
+                    }), jsx("line", {
+                      x1: "12",
+                      y1: "18",
+                      x2: "12",
+                      y2: "18"
                     })]
-                  })]
-                })]
+                  }), t('mobile_tab')]
+                })
               })]
+            }), jsx("div", {
+              className: "mb-4",
+              children: renderHeaderSettings()
             }), jsxs("div", {
               className: "mt-6 mb-4",
               children: [jsx("p", {
@@ -536,91 +852,15 @@ import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import {use
                 style: {
                   color: navTheme === 'dark' ? '#ffff' : 'black'
                 },
-                children: t('mobile_settings')
-              }), jsxs("div", {
+                children: t('search_bar')
+              }), jsx("div", {
                 className: "pl-4 space-y-2",
-                children: [jsxs("div", {
-                  className: "flex items-center",
-                  children: [jsx("p", {
-                    style: {
-                      color: navTheme === 'dark' ? '#ffff' : 'black'
-                    },
-                    children: t('search_bar')
-                  }), jsx("div", {
-                    className: "flex-grow"
-                  }), jsx(Switch, {
-                    value: mobileHeader.searchBarRender,
-                    onChange: checked => handleMobileHeaderChange('searchBarRender', checked)
-                  })]
-                }), jsxs("div", {
-                  className: "flex items-center",
-                  children: [jsx("p", {
-                    style: {
-                      color: navTheme === 'dark' ? '#ffff' : 'black'
-                    },
-                    children: t('search_bar_on_scroll')
-                  }), jsx("div", {
-                    className: "flex-grow"
-                  }), jsx(Switch, {
-                    value: mobileHeader.searchBarBehavior === SearchBarBehavior.ON_SCROLL,
-                    onChange: checked => handleMobileHeaderChange('searchBarBehavior', checked ? SearchBarBehavior.ON_SCROLL : SearchBarBehavior.PERMANENT)
-                  })]
-                }), jsxs("div", {
-                  className: "flex items-center",
-                  children: [jsx("p", {
-                    style: {
-                      color: navTheme === 'dark' ? '#ffff' : 'black'
-                    },
-                    children: t('search_bar_overlay')
-                  }), jsx("div", {
-                    className: "flex-grow"
-                  }), jsx(Switch, {
-                    value: mobileHeader.searchBarOverlay,
-                    onChange: checked => handleMobileHeaderChange('searchBarOverlay', checked)
-                  })]
-                }), jsxs("div", {
-                  className: "mb-4",
-                  children: [jsxs("div", {
-                    className: "flex items-center justify-between mb-2",
-                    children: [jsx("p", {
-                      style: {
-                        color: navTheme === 'dark' ? '#ffff' : 'black'
-                      },
-                      children: t('scroll_threshold')
-                    }), jsxs("span", {
-                      className: "text-sm",
-                      style: {
-                        color: navTheme === 'dark' ? '#ffff' : 'black'
-                      },
-                      children: [mobileHeader.scrollThreshold || scrollThresholdConfig.DEFAULT, "px"]
-                    })]
-                  }), jsxs("div", {
-                    className: "relative",
-                    children: [jsx("input", {
-                      type: "range",
-                      min: scrollThresholdConfig.MIN,
-                      max: scrollThresholdConfig.MAX,
-                      step: scrollThresholdConfig.STEP,
-                      value: mobileHeader.scrollThreshold || scrollThresholdConfig.DEFAULT,
-                      onChange: e => handleMobileHeaderChange('scrollThreshold', parseInt(e.target.value)),
-                      className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
-                    }), jsxs("div", {
-                      className: "flex justify-between text-xs mt-2",
-                      children: [jsxs("span", {
-                        children: [scrollThresholdConfig.MIN, "px"]
-                      }), jsxs("span", {
-                        children: [scrollThresholdConfig.MAX / 2, "px"]
-                      }), jsxs("span", {
-                        children: [scrollThresholdConfig.MAX, "px"]
-                      })]
-                    })]
-                  })]
-                })]
+                children: renderSearchBarSettings()
               })]
             })]
-          })]
-        })]
-      })
+          })
+        })
+      })]
     }), jsxs("div", {
       className: "flex items-center mb-2",
       children: [jsx("p", {