{"version":3,"sources":["../src/components/ToggleBreakPoints.tsx"],"names":["Laptop","PhoneAndroid","TabletAndroid","Tv","ToggleButton","ToggleButtonGroup","React","useRecoilState","ToggleBreakPoints","props","saveData","useSaveData","breakpoint","setBreakpoint","USE_BREAKPOINTS","_event","newBreakpoint","ToggleBreakPoints_default"],"mappings":"sMAAA,OAAS,UAAAA,EAAQ,gBAAAC,EAAc,iBAAAC,EAAe,MAAAC,MAAU,sBACxD,OACE,gBAAAC,EACA,qBAAAC,MAEK,gBACP,UAAYC,MAAW,QACvB,OAAS,kBAAAC,MAAsB,SAK/B,IAAMC,EAAuDC,GAAU,CACrE,IAAMC,EAAWC,EAAY,EACvB,CAACC,EAAYC,CAAa,EAAIN,EAAeO,CAAe,EAalE,OACE,gBAACT,EAAA,CACC,KAAK,QACJ,GAAGI,EACJ,MAAOG,EACP,SAhBqB,MACvBG,EACAC,IACG,CACCA,IACF,MAAMN,EAAS,EAEfG,EAAcG,CAAa,EAE/B,EAQI,aAAW,aACX,UAAS,IAET,gBAACZ,EAAA,CAAa,MAAM,SAAS,aAAW,UACtC,gBAACH,EAAA,IAAa,CAChB,EACA,gBAACG,EAAA,CAAa,MAAM,SAAS,aAAW,UACtC,gBAACF,EAAA,IAAc,CACjB,EACA,gBAACE,EAAA,CAAa,MAAM,UAAU,aAAW,WACvC,gBAACJ,EAAA,IAAO,CACV,EACA,gBAACI,EAAA,CAAa,MAAM,MAAM,aAAW,OACnC,gBAACD,EAAA,IAAG,CACN,CACF,CAEJ,EAEOc,EAAQT","sourcesContent":["import { Laptop, PhoneAndroid, TabletAndroid, Tv } from \"@mui/icons-material\";\nimport {\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupProps,\n} from \"@mui/material\";\nimport * as React from \"react\";\nimport { useRecoilState } from \"recoil\";\nimport { USE_BREAKPOINTS } from \"../hooks/useBreakpoint\";\nimport { useSaveData } from \"../hooks/useSaveData\";\nimport { TBreakpointLabels } from \"../utils/constants/hooks/breakpoints\";\n\nconst ToggleBreakPoints: React.FC<ToggleButtonGroupProps> = (props) => {\n  const saveData = useSaveData();\n  const [breakpoint, setBreakpoint] = useRecoilState(USE_BREAKPOINTS);\n\n  const handleBreakpoint = async (\n    _event: React.MouseEvent<HTMLElement>,\n    newBreakpoint: TBreakpointLabels\n  ) => {\n    if (newBreakpoint) {\n      await saveData();\n\n      setBreakpoint(newBreakpoint);\n    }\n  };\n\n  return (\n    <ToggleButtonGroup\n      size=\"small\"\n      {...props}\n      value={breakpoint}\n      onChange={handleBreakpoint}\n      aria-label=\"breakpoint\"\n      exclusive\n    >\n      <ToggleButton value=\"mobile\" aria-label=\"mobile\">\n        <PhoneAndroid />\n      </ToggleButton>\n      <ToggleButton value=\"tablet\" aria-label=\"tablet\">\n        <TabletAndroid />\n      </ToggleButton>\n      <ToggleButton value=\"desktop\" aria-label=\"desktop\">\n        <Laptop />\n      </ToggleButton>\n      <ToggleButton value=\"all\" aria-label=\"all\">\n        <Tv />\n      </ToggleButton>\n    </ToggleButtonGroup>\n  );\n};\n\nexport default ToggleBreakPoints;\n"]}