{"version":3,"sources":["../src/components/Browser/index.tsx","../src/components/Browser/BrowserHeader.tsx"],"names":["React","Stack","Icon","Typography","Box","Link","BrowserHeader","domain","breakpoint","BrowserDots","BrowserArrows","BrowserIcon","BrowserUrlInput","BrowserHeader_default","BrowserDot","color","name","fontSize","BrowserPath","path","useXPathValue","useXoraiaValue","useRecoilState","useKey","useUndo","useRedo","Browser","children","label","useBreakpoint","BREAKPOINTS","index","setIndex","USE_SELECTED_INDEX","config","undo","redo","event","canExecute","mainProps","Browser_default"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { Stack } from \"@mui/material\";\nimport BrowserHeader from \"./BrowserHeader\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport { BREAKPOINTS } from \"../../utils/constants/hooks/breakpoints\";\nimport { useRecoilState } from \"recoil\";\nimport { USE_SELECTED_INDEX } from \"../../hooks/useSelectedElement\";\nimport { useXoraiaValue } from \"../../hooks/useXoraia\";\nimport { useKey } from \"react-use\";\nimport { canExecute } from \"../../lib/canExecute\";\nimport { useUndo, useRedo } from \"recoil-undo\";\n// import ShowPreview from \"../ShowPreview\";\n\nconst Browser: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const label = useBreakpoint();\n\n  const breakpoint = BREAKPOINTS[label];\n\n  const [index, setIndex] = useRecoilState(USE_SELECTED_INDEX);\n\n  const config = useXoraiaValue();\n\n  React.useEffect(() => {\n    setIndex(index);\n  }, [breakpoint]);\n\n  // undo-redo\n\n  const undo = useUndo();\n  const redo = useRedo();\n\n  useKey(\"z\", (event) => {\n    if (canExecute(event)) {\n      if (event.shiftKey) {\n        console.log(\"redo\");\n        redo();\n      } else {\n        console.log(\"undo\");\n        undo();\n      }\n    }\n  });\n\n  const mainProps =\n    config.env === \"preview\"\n      ? {\n          width: \"100vw\",\n          height: \"100vh\",\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          zIndex: 10000,\n        }\n      : {\n          width: \"100%\",\n          maxWidth: breakpoint.deviceWidth ?? \"calc(100vw - 400px)\",\n          height: \"100%\",\n          // flex: 1,\n          border: 0.5,\n          position: \"relative\",\n        };\n\n  return (\n    <Stack sx={{ transition: \"all linear 0.3s\", ...(mainProps as any) }}>\n      <Stack\n        id=\"X_BROWSER\"\n        sx={{\n          flex: 1,\n          bgcolor: \"white\",\n          height: \"100%\",\n          position: \"relative\",\n          overflowY: \"scroll\",\n          overflowX: \"visible\",\n\n          \"& p\": { mt: 0 },\n        }}\n      >\n        {config.env !== \"preview\" && <BrowserHeader breakpoint={label} />}\n        <Stack\n          sx={{\n            flex: 1,\n            // minHeight: 400,\n            overflowY: \"scroll\",\n            overflowX: \"visible\",\n          }}\n        >\n          {children}\n        </Stack>\n      </Stack>\n      {/* {config.env === \"preview\" && <ShowPreview />} */}\n    </Stack>\n  );\n};\n\nexport default Browser;\n","import * as React from \"react\";\nimport { Icon, Stack, Typography, Box, Link } from \"@mui/material\";\nimport { TBreakpointLabels } from \"../../utils/constants/hooks/breakpoints\";\nimport { useXPathValue } from \"../../hooks/useXPath\";\nimport { useXoraiaValue } from \"../../hooks/useXoraia\";\n\nconst BrowserHeader: React.FC<{\n  domain?: string;\n  breakpoint: TBreakpointLabels;\n}> = ({ domain, breakpoint }) => {\n  return (\n    <Stack\n      className=\"x-browser-header\"\n      width=\"100%\"\n      alignItems={\"center\"}\n      direction=\"row\"\n      bgcolor=\"#1C2B45\"\n      px={3}\n      height={50}\n      spacing={2}\n      py={1}\n      zIndex={10}\n      position=\"relative\"\n    >\n      {/* <BrowserDots /> */}\n      {breakpoint !== \"mobile\" && <BrowserDots />}\n      {breakpoint !== \"mobile\" && <BrowserArrows />}\n      {breakpoint !== \"mobile\" && <BrowserIcon name=\"fi fi-rr-refresh\" />}\n\n      <BrowserUrlInput domain={domain} />\n      <BrowserIcon name=\"fi fi-rr-menu-dots-vertical\" />\n    </Stack>\n  );\n};\n\nexport default BrowserHeader;\n\nconst BrowserDot: React.FC<{ color: string }> = ({ color }) => {\n  return <Box width={12} height={12} borderRadius=\"50%\" bgcolor={color} />;\n};\n\nconst BrowserIcon: React.FC<{\n  name: string;\n  fontSize?: number;\n  color?: string;\n}> = ({ name, fontSize, color }) => {\n  return (\n    <Icon\n      sx={{\n        color: color || \"#7D8897\",\n        \"&.material-icons\": {\n          fontSize: fontSize || 15,\n        },\n        \"&::before\": {\n          color: \"inherit\",\n          lineHeight: \"1em\",\n          fontSize: fontSize || 15,\n        },\n      }}\n      className={name}\n    />\n  );\n};\n\nconst BrowserArrows: React.FC = () => {\n  return (\n    <Stack direction={\"row\"} alignItems=\"center\" spacing={1}>\n      <BrowserIcon name=\"fi fi-rr-arrow-small-left\" fontSize={25} />\n      <BrowserIcon name=\"fi fi-rr-arrow-small-right\" fontSize={25} />\n    </Stack>\n  );\n};\n\nconst BrowserDots: React.FC = () => {\n  return (\n    <Stack direction={\"row\"} alignItems=\"center\" spacing={1.5}>\n      <BrowserDot color=\"#E85F59\" />\n      <BrowserDot color=\"#EE8437\" />\n      <BrowserDot color=\"#54B489\" />\n    </Stack>\n  );\n};\n\nconst BrowserPath: React.FC<{ domain?: string }> = () => {\n  const path = useXPathValue();\n  const { domain } = useXoraiaValue();\n\n  return (\n    <Link\n      href={domain ? `https://${domain}${path}` : undefined}\n      target=\"_blank\"\n      sx={{ \"&:hover\": { textDecoration: \"none\" } }}\n    >\n      <Typography color=\"white\" fontSize={14}>\n        <Typography component=\"span\" color=\"#7D8897\" fontSize=\"inherit\">\n          https://\n        </Typography>\n        {(domain ?? \"mywebsite.com\") + path}\n      </Typography>\n    </Link>\n  );\n};\n\nconst BrowserUrlInput: React.FC<{ domain?: string }> = ({ domain }) => {\n  return (\n    <Stack\n      direction={\"row\"}\n      alignItems=\"center\"\n      spacing={1}\n      bgcolor=\"#34415A\"\n      px={2}\n      py={0.5}\n      borderRadius={3}\n      flex={1}\n    >\n      <BrowserIcon name=\"fi fi-rr-lock\" color=\"#54B489\" />\n      <BrowserPath domain={domain} />\n    </Stack>\n  );\n};\n"]}