{"version":3,"file":"DarkModeToggle-BGmXj5T7.js","sources":["../../../app/javascript/components/Website/src/components/DarkModeToggle.tsx"],"sourcesContent":["import React from 'react'\nimport { useState } from 'react'\nimport { Body, Flex, FlexItem, Icon, Toggle } from 'playbook-ui'\n\ntype ToggleProps = {\n  initMode: string,\n}\nconst DarkModeToggle = ({ initMode }: ToggleProps) => {\n  const [darkMode, toggleDarkMode] = useState(initMode ? JSON.parse(initMode) : false)\n  const [loading, toggleLoading] = useState(false)\n\n  const toggleHook = () => {\n    toggleLoading(true)\n    toggleDarkMode(!darkMode)\n    window.location = !darkMode ? '/enable_dark_mode' : '/disable_dark_mode'\n  }\n\n  const iconClickHandler = () => {\n    toggleHook()\n  }\n\n  return (\n    <Flex\n        spacing=\"between\"\n        vertical=\"center\"\n    >\n      {loading && (\n        <FlexItem>\n          <Body\n              color={darkMode ? 'lighter' : ''}\n              dark={!darkMode}\n          >\n            <Icon\n                className=\"toggle-icon\"\n                dark\n                fixedWidth\n                icon=\"spinner\"\n                marginRight=\"xs\"\n                pulse\n            />\n          </Body>\n        </FlexItem>\n      )}\n      {!loading && (\n        <a\n            onClick={iconClickHandler}\n            style={{ cursor: 'pointer' }}\n        >\n          <FlexItem>\n            <Body\n                color={darkMode ? '' : 'lighter'}\n                dark={darkMode}\n            >\n              <Icon\n                  className=\"toggle-icon\"\n                  dark\n                  fixedWidth\n                  icon=\"moon\"\n                  marginRight=\"xs\"\n              />\n            </Body>\n          </FlexItem>\n        </a>\n      )}\n      <FlexItem>\n        <Toggle>\n          <input\n              checked={darkMode}\n              onChange={toggleHook}\n              type=\"checkbox\"\n          />\n        </Toggle>\n      </FlexItem>\n    </Flex>\n  )\n}\n\nexport default DarkModeToggle\n"],"names":["DarkModeToggle","initMode","darkMode","toggleDarkMode","useState","loading","toggleLoading","toggleHook","iconClickHandler","jsxs","Flex","FlexItem","jsx","Body","Icon","Toggle"],"mappings":"mMAOA,MAAMA,EAAiB,CAAC,CAAE,SAAAC,KAA4B,CAC9C,KAAA,CAACC,EAAUC,CAAc,EAAIC,WAASH,EAAW,KAAK,MAAMA,CAAQ,EAAI,EAAK,EAC7E,CAACI,EAASC,CAAa,EAAIF,WAAS,EAAK,EAEzCG,EAAa,IAAM,CACvBD,EAAc,EAAI,EAClBH,EAAe,CAACD,CAAQ,EACjB,OAAA,SAAYA,EAAiC,qBAAtB,mBAAsB,EAGhDM,EAAmB,IAAM,CAClBD,GAAA,EAIX,OAAAE,EAAA,KAACC,EAAA,CACG,QAAQ,UACR,SAAS,SAEV,SAAA,CAAAL,SACEM,EACC,CAAA,SAAAC,EAAA,IAACC,EAAA,CACG,MAAOX,EAAW,UAAY,GAC9B,KAAM,CAACA,EAET,SAAAU,EAAA,IAACE,EAAA,CACG,UAAU,cACV,KAAI,GACJ,WAAU,GACV,KAAK,UACL,YAAY,KACZ,MAAK,EAAA,CACT,CAAA,CAAA,EAEJ,EAED,CAACT,GACAO,EAAA,IAAC,IAAA,CACG,QAASJ,EACT,MAAO,CAAE,OAAQ,SAAU,EAE7B,eAACG,EACC,CAAA,SAAAC,EAAA,IAACC,EAAA,CACG,MAAOX,EAAW,GAAK,UACvB,KAAMA,EAER,SAAAU,EAAA,IAACE,EAAA,CACG,UAAU,cACV,KAAI,GACJ,WAAU,GACV,KAAK,OACL,YAAY,IAAA,CAChB,CAAA,CAAA,EAEJ,CAAA,CACF,EAEFF,EAAA,IAACD,EACC,CAAA,SAAAC,EAAA,IAACG,EACC,CAAA,SAAAH,EAAA,IAAC,QAAA,CACG,QAASV,EACT,SAAUK,EACV,KAAK,UAAA,GAEX,CACF,CAAA,CAAA,CAAA,CAAA,CAGN"}