{"version":3,"file":"index-BTiSaXyK.js","sources":["../../../app/javascript/components/Website/src/components/Sandbox/index.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\"\nimport { Flex } from \"playbook-ui\"\nimport {\n  SandpackCodeEditor,\n  SandpackLayout,\n  SandpackPreview,\n  useActiveCode,\n} from \"@codesandbox/sandpack-react\"\nimport { Buttons } from \"./Buttons\"\nimport { useClipboard } from \"../../hooks/useClipboard\"\n\nimport \"./styles.scss\"\n\nexport default function Sandbox({ backgroundColor = \"white\" }) {\n  const { code } = useActiveCode()\n  const [isExpanded, setIsExpanded] = useState(false)\n  const { setValue, hasCopied, onCopy } = useClipboard(code)\n  useEffect(() => {\n    setValue(code)\n  }, [code])\n\n  const [showCopyTooltip, setShowCopyTooltip] = useState(true)\n\n  const handleCopy = () => {\n    onCopy()\n    setShowCopyTooltip(true)\n  }\n\n  return (\n    <SandpackLayout\n      className={`sandbox-layout`}\n      style={{\n        border: \"none\",\n        fontFamily: \"Power Centra\",\n      }}\n    >\n      <Flex orientation='column' alignSelf='stretch'>\n        <SandpackPreview\n          className={`sandbox-preview ${isExpanded ? \"expanded\" : \"\"}`}\n          showOpenInCodeSandbox={false}\n          showRefreshButton={false}\n          style={{ backgroundColor: backgroundColor, height: \"auto\" }}\n          actionsChildren={\n            <Buttons\n              isExpanded={isExpanded}\n              setIsExpanded={setIsExpanded}\n              hasCopied={hasCopied}\n              showCopyTooltip={showCopyTooltip}\n              handleCopy={handleCopy}\n            />\n          }\n        />\n\n        {isExpanded && <SandpackCodeEditor style={{ height: \"auto\" }} />}\n      </Flex>\n    </SandpackLayout>\n  )\n}\n"],"names":["Sandbox","backgroundColor","code","useActiveCode","isExpanded","setIsExpanded","useState","setValue","hasCopied","onCopy","useClipboard","useEffect","showCopyTooltip","setShowCopyTooltip","handleCopy","jsx","SandpackLayout","jsxs","Flex","SandpackPreview","Buttons","SandpackCodeEditor"],"mappings":"mWAaA,SAAwBA,EAAQ,CAAE,gBAAAC,EAAkB,SAAW,CACvD,KAAA,CAAE,KAAAC,GAASC,IACX,CAACC,EAAYC,CAAa,EAAIC,WAAS,EAAK,EAC5C,CAAE,SAAAC,EAAU,UAAAC,EAAW,OAAAC,CAAO,EAAIC,EAAaR,CAAI,EACzDS,EAAAA,UAAU,IAAM,CACdJ,EAASL,CAAI,CAAA,EACZ,CAACA,CAAI,CAAC,EAET,KAAM,CAACU,EAAiBC,CAAkB,EAAIP,WAAS,EAAI,EAErDQ,EAAa,IAAM,CAChBL,IACPI,EAAmB,EAAI,CAAA,EAIvB,OAAAE,EAAA,IAACC,EAAA,CACC,UAAW,iBACX,MAAO,CACL,OAAQ,OACR,WAAY,cACd,EAEA,SAACC,EAAAA,KAAAC,EAAA,CAAK,YAAY,SAAS,UAAU,UACnC,SAAA,CAAAH,EAAA,IAACI,EAAA,CACC,UAAW,mBAAmBf,EAAa,WAAa,EAAE,GAC1D,sBAAuB,GACvB,kBAAmB,GACnB,MAAO,CAAE,gBAAAH,EAAkC,OAAQ,MAAO,EAC1D,gBACEc,EAAA,IAACK,EAAA,CACC,WAAAhB,EACA,cAAAC,EACA,UAAAG,EACA,gBAAAI,EACA,WAAAE,CAAA,CACF,CAAA,CAEJ,EAECV,GAAeW,EAAA,IAAAM,EAAA,CAAmB,MAAO,CAAE,OAAQ,QAAU,CAAA,EAChE,CAAA,CAAA,CAGN"}