text: (this["webpackJsonpthefront-js--react-scripts"]=this["webpackJsonpthefront-js--react-scripts"]||[]).push([[17],{707:function(e,t,o){"use strict";o.r(t),o.d(t,"default",(function(){return m}));var n=o(1),r=o(0),c=o(24),s=o(2),i=o(693),a=o(151),d=o(9),l=[{name:"themeMode",type:"string",default:"",description:"The theme mode"},{name:"className",type:"string",default:"",description:"External classes"},{name:"onClick",type:"Function",default:"",description:"Function to handle the click of teh toggler"}],m=function(e){var t=Object.assign({},e),o=Object(s.useState)("light"),m=Object(c.a)(o,2),p=m[0],g=m[1];return Object(r.jsxs)("div",Object(n.a)(Object(n.a)({},t),{},{children:[Object(r.jsx)(a.e,{title:"Description",gutterBottom:!0,children:Object(r.jsx)(a.b,{title:"DarkModeToggler",path:"src/components/atoms/DarkModeToggler/DarkModeToggler.js",description:"Component to display the dark mode toggler"})}),Object(r.jsx)(a.e,{title:"Import",gutterBottom:!0,children:Object(r.jsx)(a.a,{code:"\nimport { DarkModeToggler } from 'components/atoms';\n// or\nimport DarkModeToggler from 'components/atoms/DarkModeToggler';\n"})}),Object(r.jsx)(a.e,{title:"Props & Methods",gutterBottom:!0,children:Object(r.jsx)(a.d,{dataProperties:l})}),Object(r.jsx)(a.e,{title:"Example",gutterBottom:!0,children:Object(r.jsxs)(r.Fragment,{children:[Object(r.jsx)(i.a,{marginBottom:2,display:"flex",justifyContent:"space-between",alignItems:"center",padding:2,border:"1px solid #ccc",borderRadius:"4px",children:Object(r.jsx)(d.a,{themeMode:p,onClick:function(){return g("light"===p?"dark":"light")}})}),Object(r.jsx)(a.a,{code:"\nimport React, { useState } from 'react';\nimport { Box } from '@material-ui/core';\nimport { DarkModeToggler } from 'components/atoms';\n\nexport default function DarkModeTogglerExample() {\n  const [themeMode, setThemeMode] = useState('light');\n  const handleClick = () => setThemeMode(themeMode === 'light' ? 'dark' : 'light');\n\n  return (\n    <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\" padding={2} border=\"1px solid #ccc\" borderRadius=\"4px\">\n      <DarkModeToggler themeMode={themeMode} onClick={() => handleClick()} />\n    </Box>\n  );\n}\n"})]})})]}))}}}]);