@admin-layout/tailwind-design-pro 11.0.4-alpha.4 → 12.0.16-alpha.1

package/lib/components/SettingDrawer/RegionalSettings.js

@@ -1,94 +1,739 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useTranslation}from'react-i18next';import {Switch}from'./Switch/index.js';function RegionalSettings(props) {
-  const {
-    settings,
-    changeSetting
-  } = 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';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import'../../hooks/use-get-current-lat-long.js';import {useMediaQuery}from'../../hooks/useMediaQuery.js';function RegionalSettings(props) {
   const {
     t
   } = useTranslation('settings');
   const {
-    showHeader,
-    showFooter,
-    searchBarRender,
-    showMenu,
-    menuHeaderRender,
+    settings,
+    changeSetting,
+    location
+  } = props;
+  const {
     navTheme
-  } = settings;
+  } = settings || {};
+  const currentRoute = location?.pathname || '/';
+  const {
+    regions = {}
+  } = settings?.routeSettings?.[currentRoute] || {};
+  const [isHeaderExpanded, setIsHeaderExpanded] = React.useState(false);
+  const [isBackgroundExpanded, setIsBackgroundExpanded] = React.useState(true);
+  const [activeBackgroundTab, setActiveBackgroundTab] = React.useState('desktop');
+  const [activeHeaderTab, setActiveHeaderTab] = React.useState('desktop');
+  const {
+    isMobile
+  } = useMediaQuery();
+  const scrollThresholdConfig = JSON.parse(config.SCROLL_THRESHOLD);
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  const handleRegionChange = (key, value) => {
+    if (!changeSetting) return;
+    changeSetting(`routeSettings.${currentRoute}.regions.${deviceType}.header`, {
+      ...regions[deviceType]?.header,
+      [key]: value
+    });
+  };
+  const handleRegionFooterChange = (key, value) => {
+    if (!changeSetting) return;
+    changeSetting(`routeSettings.${currentRoute}.regions.${deviceType}.footer`, {
+      ...regions[deviceType]?.footer,
+      [key]: value
+    });
+  };
+  const handleBackgroundChange = (property, value) => {
+    if (!changeSetting) return;
+    changeSetting(`routeSettings.${currentRoute}.regions.${deviceType}.background`, {
+      ...regions[deviceType].background,
+      [property]: value
+    });
+  };
+  const handleHeaderChange = (element, value) => {
+    if (!changeSetting) return;
+    changeSetting(`routeSettings.${currentRoute}.regions.${deviceType}.header`, {
+      ...regions[deviceType]?.header,
+      [element]: value
+    });
+  };
+  const header = regions[deviceType]?.header;
+  const background = regions[deviceType]?.background;
+  // Helper function to render background settings based on current active tab
+  const renderBackgroundSettings = () => {
+    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("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"
+        }), jsx("div", {
+          className: "flex flex-wrap gap-2 mt-3",
+          children: !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';
+    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('show_logo')
+        }), jsx("div", {
+          className: "flex-grow"
+        }), jsx(Switch, {
+          value: header?.showLogo,
+          onChange: checked => handleHeaderChange('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: 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 = () => {
+    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: "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: [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: "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"]
+            })]
+          })]
+        })]
+      })]
+    });
+  };
   return jsxs("div", {
     children: [jsxs("div", {
-      className: "flex items-center mb-2",
-      children: [jsx("p", {
-        style: {
-          color: navTheme == 'dark' ? '#ffff' : 'black'
-        },
-        children: t('header')
+      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('background')
+          })]
+        })
       }), jsx("div", {
-        className: "flex-grow"
-      }), jsx(Switch, {
-        settings: settings,
-        value: showHeader || showHeader === undefined,
-        changeSetting: changeSetting,
-        settingKey: "showHeader"
+        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 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: "flex items-center mb-2",
-      children: [jsx("p", {
-        style: {
-          color: navTheme == 'dark' ? '#ffff' : 'black'
-        },
-        children: t('footer')
+      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('header')
+          })]
+        })
       }), jsx("div", {
-        className: "flex-grow"
-      }), jsx(Switch, {
-        settings: settings,
-        value: showFooter || showFooter === undefined,
-        changeSetting: changeSetting,
-        settingKey: "showFooter"
+        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: "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"
+                    })]
+                  }), 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", {
+                className: "font-medium mb-2",
+                style: {
+                  color: navTheme === 'dark' ? '#ffff' : 'black'
+                },
+                children: t('search_bar')
+              }), jsx("div", {
+                className: "pl-4 space-y-2",
+                children: renderSearchBarSettings()
+              })]
+            })]
+          })
+        })
       })]
     }), jsxs("div", {
       className: "flex items-center mb-2",
       children: [jsx("p", {
         style: {
-          color: navTheme == 'dark' ? '#ffff' : 'black'
+          color: navTheme === 'dark' ? '#ffff' : 'black'
         },
-        children: t('search_bar')
+        children: t('footer')
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        settings: settings,
-        value: searchBarRender || searchBarRender === undefined,
-        changeSetting: changeSetting,
-        settingKey: "searchBarRender"
+        value: regions[deviceType]?.footer?.showFooter,
+        onChange: checked => handleRegionFooterChange('showFooter', checked)
       })]
     }), jsxs("div", {
       className: "flex items-center mb-2",
       children: [jsx("p", {
         style: {
-          color: navTheme == 'dark' ? '#ffff' : 'black'
+          color: navTheme === 'dark' ? '#ffff' : 'black'
         },
         children: t('menu')
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        settings: settings,
-        value: showMenu || showMenu === undefined,
-        changeSetting: changeSetting,
-        settingKey: "showMenu"
+        value: regions[deviceType]?.header?.showMenu,
+        onChange: checked => handleRegionChange('showMenu', checked)
       })]
     }), jsxs("div", {
       className: "flex items-center mb-2",
       children: [jsx("p", {
         style: {
-          color: navTheme == 'dark' ? '#ffff' : 'black'
+          color: navTheme === 'dark' ? '#ffff' : 'black'
         },
         children: t('menu_header')
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        settings: settings,
-        value: menuHeaderRender || menuHeaderRender === undefined,
-        changeSetting: changeSetting,
-        settingKey: "menuHeaderRender"
+        value: regions[deviceType]?.header?.menuHeaderRender,
+        onChange: checked => handleRegionChange('menuHeaderRender', checked)
       })]
     })]
   });