@admin-layout/tailwind-design-pro 10.1.1-alpha.9 → 11.2.1-alpha.1

package/lib/components/SettingDrawer/RegionalSettings.js

@@ -1,740 +0,0 @@
-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 {
-    settings,
-    changeSetting,
-    location
-  } = props;
-  const {
-    navTheme
-  } = 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", {
-      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: `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", {
-      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: `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'
-        },
-        children: t('footer')
-      }), jsx("div", {
-        className: "flex-grow"
-      }), jsx(Switch, {
-        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'
-        },
-        children: t('menu')
-      }), jsx("div", {
-        className: "flex-grow"
-      }), jsx(Switch, {
-        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'
-        },
-        children: t('menu_header')
-      }), jsx("div", {
-        className: "flex-grow"
-      }), jsx(Switch, {
-        value: regions[deviceType]?.header?.menuHeaderRender,
-        onChange: checked => handleRegionChange('menuHeaderRender', checked)
-      })]
-    })]
-  });
-}export{RegionalSettings as default};//# sourceMappingURL=RegionalSettings.js.map