{"version":3,"sources":["images/icon_Search.png","components/becomeInstructorModal/loadable.js","images/BGcarouselLanding.svg","containers/searchBar/styles.js","components/rolePopup/loadable.js","containers/searchBar/modalMobileNoti.js","containers/searchBar/RoleSelector.js","containers/searchBar/SearchInput.js","images/Social Icon_Website.svg","images/icons/IconLandingPage/ListLandingWhite.svg","images/icons/IconLandingPage/SearchLandingWhite.svg","images/icons/IconLandingPage/SearchLandingBlue.svg","images/icons/IconLandingPage/StudentLandingBlue.svg","images/icons/IconLandingPage/TeacherLandingBlue.svg","images/icons/IconLandingPage/LoginLandingBlue.svg","images/icons/IconLandingPage/LoginLandingWhite.svg"],"names":["Loadable","loader","loading","ContainerAvatar","styled","div","SearchBarContainer","isHide","isShowShadow","isFeedPage","css","SearchBarTop","props","theme","gray6","primary2","SearchFormContainer","SearchLabel","button","grey","ButtonLang","Button","primary5","LanguageGroup","NotiIcon","Icon","NotiContainer","Div","Checkbox","background","CloseIcon","overlay","zIndex","top","content","borderRadius","border","padding","overflow","left","right","bottom","ModalMobileNoti","isOpen","handleTogglePopup","onClose","style","position","width","height","backgroundColor","onClick","onRequestClose","handleToggle","CustomButton","RoleSelector","role","this","isTeacherPath","id","secondary","reverse","icon","className","Component","initFilter","categories","subCategories","levels","types","prices","WrapSearchInput","withRouter","location","inputRef","useRef","useEffect","current","focus","query","qs","parse","search","ignoreQueryPrefix","useState","pathname","searchType","q","searchInput","setSearchInput","onSearch","history","closeSearch","queryString","stringify","push","onClickCustom","refs","isIcon","isPadding","placeholder","defaultValue","onChange","event","target","value","onKeyPress","e","keyCode","which","preventDefault","isBorder","connect","state","courseCategories","CourseCategories","getCourseCategories","getCourseCategoriesWithCount","useHistory","windowWidth","useWindowSize","showSearchInput","setShowSearchInput","subCategoryOptions","setSubCategoryOptions","filter","setFilter","freeCourse","setFreeCourse","gesOption","categoryOption","count","map","name","label","categoryOptions","length","category","find","includes","subcategories","item","handleFilterCategories","arrayName","newFilter","_","cloneDeep","handleClickFreeCourse","a","prev","minWidth","maxWidth","display","src","SearchIcon","alt","contentStyle","transform","justifyContent","paddingBottom","bold","fontSize","CancelIcon","flexDirection","alignItems","isStyle","gap","options","checked","margin","color","primary","type","encodeValuesOnly","searchFilterCategories"],"mappings":"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","file":"static/js/13.e899036e.chunk.js","sourcesContent":["export default \"data:image/png;base64,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\"","import Loadable from 'react-loadable'\n\nexport default Loadable({\n  loader: () => import('./index'),\n  loading: () => null,\n})\n","export default __webpack_public_path__ + \"static/media/BGcarouselLanding.08967fb8.svg\";","import styled, { css } from 'styled-components'\nimport { Dropdown, Button, Typography, Icon } from '../../components'\n\nexport const ContainerAvatar = styled.div`\n  margin-left: 16px;\n  cursor: pointer;\n  @media (max-width: 426px) {\n    margin-left: 14px;\n  }\n`\nexport const SearchBarContainer = styled.div`\n  display: ${({ isHide }) => (isHide ? 'none' : 'flex')};\n  flex-direction: column;\n  min-height: 68px;\n  height: 68px;\n  padding: 8px 150px;\n  z-index: 103;\n  box-shadow: ${({ isShowShadow }) =>\n    isShowShadow ? '0px 1px 2px 0px rgba(0, 0, 0, 0.05)' : 'none'};\n  background-color: white;\n  position: fixed;\n  width: 100%;\n  ${({ isFeedPage }) => {\n    if (isFeedPage) {\n      return css`\n        position: fixed;\n        width: 100%;\n      `\n    }\n    return css``\n  }}\n  @media (max-width: 1024px) {\n    padding: 8px 50px;\n  }\n\n  @media (max-width: 768px) {\n    padding: 8px 20px;\n  }\n\n  .popup {\n    z-index: 20;\n  }\n`\n\nexport const SearchBarTop = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n\n  .notification-icon {\n    fill: ${(props) => props.theme.gray6};\n    width: 32px;\n    height: 32px;\n    margin-top: 12px;\n  }\n\n  .notification-icon:hover {\n    fill: ${(props) => props.theme.primary2};\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n  }\n\n  > :first-child {\n    margin-left: 0px;\n  }\n\n  .centre {\n    display: flex;\n    align-items: center;\n  }\n\n  .justify {\n    justify-content: space-evenly;\n    @media (max-width: 660px) {\n      justify-content: flex-end;\n    }\n  }\n\n  .full {\n    flex: 1;\n  }\n\n  img:hover {\n    cursor: pointer;\n  }\n\n  /* > :last-child:hover {\n    cursor: pointer;\n  } */\n\n  @media (max-width: 1024px) {\n    button {\n      padding: 0px;\n      font-size: ${({ theme }) => theme['text-xxs']};\n    }\n\n    img {\n      width: 20px;\n      height: 20px;\n    }\n\n    > :not(:last-child) {\n      margin-right: 10px;\n    }\n\n    > :last-child {\n      width: 30px;\n      height: 30px;\n      /* margin-right: 10px; */\n    }\n  }\n`\n\nexport const SearchBarBottom = styled.div`\n  display: relative;\n  width: 0;\n`\n\nexport const SearchFormContainer = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n  position: relative;\n  max-width: 1000px;\n  @media (max-width: 768px) {\n    max-width: 768px;\n    justify-content: flex-start;\n  }\n  @media (max-width: 660px) {\n    justify-content: space-between;\n  }\n`\n\nexport const PopupModal = {\n  overlay: {\n    background: 'transparent',\n    zIndex: '10',\n    position: 'relative',\n    width: '100%',\n    height: '100vh',\n  },\n  content: {\n    position: 'absolute',\n    padding: '0',\n    border: 'none',\n    borderRadius: '6px',\n    width: '210px',\n    left: 'auto',\n    top: '72px',\n    bottom: 'auto',\n    right: '35px',\n    boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.2)',\n  },\n}\n\nexport const NotificationModal = {\n  overlay: {\n    background: 'transparent',\n    zIndex: '10',\n    position: 'relative',\n    width: '100vw',\n    height: '100vh',\n  },\n  content: {\n    position: 'absolute',\n    padding: '0',\n    border: 'none',\n    borderRadius: '6px',\n    width: '380px',\n    left: 'auto',\n    top: '72px',\n    bottom: 'auto',\n    right: '90px',\n    boxShadow: '0 2px 12px 0 rgba(0, 0, 0, 0.2)',\n  },\n}\n\nexport const IconButton = styled.button`\n  border: none;\n  background: transparent;\n  outline: none;\n  margin-left: 8px;\n  svg {\n    fill: ${(props) => props.theme.grey};\n  }\n  .search-icon {\n    position: absolute;\n    right: 15px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 18px;\n    height: 18px;\n\n    @media (max-width: 768px) {\n      right: 25px;\n      width: 15px;\n      height: 15px;\n    }\n  }\n`\n\nexport const SearchLabel = styled.div`\n  background-color: transparent;\n  border-radius: 50%;\n  svg {\n    width: 16px;\n    height: 16px;\n    position: relative;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n`\n\nconst ButtonLang = styled(Button)`\n  border: 0px solid transparent;\n  box-shadow: none;\n  height: 30px;\n  color: ${(props) => props.theme.gray6};\n  padding: 0 15px;\n  font-weight: 450;\n  border-radius: 20px;\n  background: #fff;\n\n  :hover {\n    border: 0px solid transparent;\n    background: ${(props) => props.theme.primary5};\n    color: ${(props) => props.theme.primary2};\n  }\n\n  img {\n    width: 14px;\n    height: 14px;\n    margin-right: 9px;\n    top: 0;\n    right: 0;\n  }\n\n  // :hover img {\n  //   color: ${(props) => props.theme.primary2};\n  // }\n`\n\nexport const LanguageGroup = styled.div`\n  display: flex;\n  position: relative;\n  margin-left: 7px;\n  justify-content: flex-end;\n`\n\nexport const NotiIcon = styled(Icon)`\n  width: 22px;\n  height: 22px;\n`\n\nexport const NotiContainer = styled.div`\n  position: relative;\n  /* width: 30px; */\n  margin-left: 16px;\n  margin-right: 16px;\n  cursor: pointer;\n  @media (max-width: 660px) {\n    margin-left: 14px;\n    margin-right: 0;\n  }\n`\n\nexport const Div = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n`\n\nexport const Checkbox = styled.div`\n  display: flex;\n  align-items: center;\n  @media (max-width: 660px) {\n    min-width: 100%;\n  }\n  ${({ background }) => {\n    if (background === 'mobile') {\n      return css`\n        margin-top: 16px;\n      `\n    }\n    return css``\n  }}\n  padding: 12px;\n  border-radius: 6px;\n\n  background: #eef0ff4d;\n\n  &:hover {\n    opacity: 100%;\n    background: #eef0ff;\n  }\n  cursor: pointer;\n  & > input {\n    width: 16px;\n    height: 16px;\n    margin-right: 10px;\n  }\n  .ant-checkbox-input {\n    border-color: #5a69fe !important;\n    &:hover {\n      border-color: #5a69fe !important;\n    }\n  }\n\n  .ant-checkbox-input:focus + .ant-checkbox-inner {\n    border-color: #5a69fe !important;\n    &:hover {\n      border-color: #5a69fe !important;\n    }\n  }\n  .ant-checkbox-wrapper:hover {\n    border-color: #5a69fe !important;\n  }\n  .ant-checkbox .ant-checkbox-wrapper {\n    border-color: #5a69fe !important;\n  }\n  .ant-checkbox-inner {\n    border-radius: 4px !important;\n    &::after {\n      top: 45%;\n    }\n    &:hover {\n      /* background-color: #5a69fe !important; */\n      border-color: #5a69fe !important;\n    }\n  }\n  .ant-checkbox-wrapper:hover .ant-checkbox-inner,\n  .ant-checkbox:hover .ant-checkbox-inner,\n  .ant-checkbox-input:focus + .ant-checkbox-inner {\n    border-color: #5a69fe !important;\n  }\n  .ant-checkbox-checked {\n    border-radius: 4px !important;\n    background-color: #5a69fe !important;\n    &:hover {\n      background-color: #5a69fe !important;\n    }\n\n    &::after {\n      border-radius: 4px !important;\n      border-color: #5a69fe !important;\n    }\n  }\n  .ant-checkbox-checked .ant-checkbox-inner {\n    background-color: #5a69fe !important;\n    border-color: #5a69fe !important;\n    &:hover {\n      background-color: #5a69fe !important;\n    }\n  }\n`\n\nexport const SelectCat = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  @media (max-width: 460px) {\n    width: 100%;\n    justify-content: space-between;\n  }\n  @media (min-width: 768px) {\n    justify-content: flex-end;\n  }\n  > div {\n    margin-left: 10px;\n    width: 200px;\n    > div {\n      width: auto;\n      border-radius: 5px;\n    }\n\n    @media (max-width: 768px) {\n      width: 150px;\n    }\n    @media (max-width: 460px) {\n      margin-left: 0px;\n      width: 49%;\n    }\n    @media (max-width: 360px) {\n      margin-left: 0px;\n      width: 47%;\n    }\n  }\n`\n\nexport const CloseIcon = styled.div`\n  height: max-content;\n  img {\n    width: 25px;\n    height: 25px;\n  }\n`\n\nexport { Typography, Dropdown, ButtonLang }\n","import Loadable from 'react-loadable'\n\nexport default Loadable({\n  loader: () => import('./index'),\n  loading: () => null,\n})\n","// import { Button } from 'components'\nimport React from 'react'\nimport ReactModal from 'react-modal'\nimport ErrorBoundary from '../../components/errorBoundary'\nimport NotificationPopup from '../../components/notificationPopup/loadable'\n\nconst overlay = {\n  zIndex: 1000,\n  top: 68,\n}\nconst content = {\n  borderRadius: 8,\n  border: '0px #fff',\n  padding: 0,\n  overflow: 'hidden',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n}\n\nconst ModalMobileNoti = ({ isOpen = false, handleTogglePopup, onClose }) => {\n  return (\n    <ErrorBoundary>\n      {isOpen && (\n        <div\n          style={{\n            top: 0,\n            left: 0,\n            position: 'fixed',\n            width: '100%',\n            height: '100%',\n            backgroundColor: 'rgba(0, 0, 0, 0.3)',\n            zIndex: 500,\n          }}\n          onClick={() => onClose()}\n        />\n      )}\n      <ReactModal isOpen={isOpen} style={{ overlay, content }} onRequestClose={onClose}>\n        <NotificationPopup handleToggle={() => handleTogglePopup('showNotiPopup')} />\n      </ReactModal>\n    </ErrorBoundary>\n  )\n}\n\nexport default ModalMobileNoti\n","import React, { Component } from 'react'\nimport styled from 'styled-components'\nimport { IoIosArrowDown } from 'react-icons/io'\nimport Button from '../../components/button'\n\nconst CustomButton = styled(Button)`\n  border: 0px solid transparent;\n  box-shadow: none;\n  height: 48px;\n  color: ${(props) => props.theme.gray6};\n  padding: 0 16px;\n  font-weight: 450;\n  border-radius: 20px;\n  .icon {\n    fill: ${(props) => props.theme.gray6};\n  }\n\n  :hover {\n    border: 0px solid transparent;\n    background: ${(props) => props.theme.primary5};\n  }\n\n  :hover .icon {\n    fill: ${(props) => props.theme.primary2};\n  }\n\n  @media (max-width: 768px) {\n    display: none;\n  }\n`\n\nclass RoleSelector extends Component {\n  render() {\n    const { isTeacherPath } = this.props\n    const role = isTeacherPath ? 'Instructor' : 'Learner'\n    return (\n      <CustomButton\n        id={`role.select.${role}`}\n        secondary\n        reverse\n        icon={<IoIosArrowDown className=\"icon\" />}\n        data-intro=\"changeRoleButton\"\n      >\n        {role}\n      </CustomButton>\n    )\n  }\n}\n\nexport default RoleSelector\n\nexport const roleMenus = [\n  {\n    label: 'Instructor',\n    link: '/teacher',\n  },\n  {\n    label: 'Learner',\n    link: '/browse/courses',\n  },\n]\n","/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable prettier/prettier */\nimport React, { useState, useEffect, useRef } from 'react'\nimport { withRouter, useHistory } from 'react-router-dom'\nimport { useWindowSize } from 'react-use'\nimport qs from 'qs'\nimport { Custom } from '../../utils/displayResponsive'\nimport Input from '../../components/searchInput'\nimport Icon from '../../components/icon'\nimport Modal from '../../components/modal'\nimport { SearchFormContainer, SearchLabel, Div, Checkbox, CloseIcon } from './styles'\nimport PureTypography from 'components/typography'\nimport { Checkbox as CheckInput } from 'antd'\nimport { Select, Typography, Button } from '../../components'\nimport SearchIcon from '../../images/icon_Search.png'\nimport CancelIcon from '../../images/ic-cancelbtn-gray-24-px.svg'\nimport { connect } from 'react-redux'\nimport _ from 'lodash'\n\nconst initFilter = {\n  categories: [],\n  subCategories: [],\n  levels: [],\n  types: [],\n  prices: [],\n}\n\nconst SearchInput = (props) => {\n  const { location, width } = props\n  const inputRef = useRef()\n\n  useEffect(() => {\n    if (inputRef.current) inputRef.current.focus()\n  }, [])\n\n  const query = qs.parse(location.search, { ignoreQueryPrefix: true })\n  const [searchType] = useState(location.pathname === '/browse/schools' ? 'Academy' : 'Course')\n  const [searchInput, setSearchInput] = useState(query.q || '')\n\n  const onSearch = () => {\n    const { history, closeSearch } = props\n    if (closeSearch) {\n      closeSearch()\n    }\n    if (searchType === 'Course') {\n      if (searchInput) {\n        const queryString = qs.stringify({\n          ...qs.parse(location.search, { ignoreQueryPrefix: true }),\n          q: searchInput,\n        })\n        history.push(`/browse/courses?${queryString}`)\n      } else {\n        history.push(`/browse/courses`)\n      }\n    } else if (searchType === 'Academy') {\n      if (searchInput) {\n        history.push(`/browse/schools?q=${searchInput}`)\n      } else {\n        history.push(`/browse/schools`)\n      }\n    }\n  }\n\n  const handleSearchInput = (event) => {\n    setSearchInput(event.target.value)\n  }\n\n  const handleEnterSearch = (e) => {\n    const code = e.keyCode ? e.keyCode : e.which\n    if (code === 13) {\n      e.preventDefault()\n      onSearch()\n    }\n  }\n\n  return (\n    <div>\n      <Input\n        onClickCustom={onSearch}\n        refs={inputRef}\n        width={width}\n        isIcon={true}\n        isPadding={true}\n        placeholder={`Search`}\n        defaultValue={query.q}\n        onChange={handleSearchInput}\n        onKeyPress={handleEnterSearch}\n        isBorder\n      />\n    </div>\n  )\n}\n\nconst WrapSearchInput = withRouter(SearchInput)\n\nconst Search = (props) => {\n  const inputRef = useRef()\n  const history = useHistory()\n  const { width: windowWidth } = useWindowSize()\n  const { width, courseCategories, getCourseCategories } = props\n  const [showSearchInput, setShowSearchInput] = useState(false)\n  const [subCategoryOptions, setSubCategoryOptions] = useState([])\n  const [filter, setFilter] = useState(initFilter)\n  const [freeCourse, setFreeCourse] = useState(false)\n  const [searchType] = useState(location.pathname === '/browse/schools' ? 'Academy' : 'Course')\n  const query = qs.parse(location.search, { ignoreQueryPrefix: true })\n  const [searchInput, setSearchInput] = useState(query.q || '')\n\n  useEffect(() => {\n    getCourseCategories()\n  }, [])\n\n  useEffect(() => {\n    gesOption()\n  }, [courseCategories, filter])\n\n  const categoryOption = courseCategories\n    .filter(({ count }) => {\n      return !!count\n    })\n    .map(({ name, id, count }) => {\n      return {\n        value: id,\n        label: `${name} (${count})`,\n      }\n    })\n\n  const categoryOptions = [{ value: 'all', label: 'All Categories' }, ...categoryOption]\n\n  const gesOption = () => {\n    if (filter?.categories?.length > 0 && courseCategories?.length > 0) {\n      const category = courseCategories?.find(({ id }) => filter?.categories?.includes(id))\n      setSubCategoryOptions(\n        category?.subcategories\n          .filter((item) => item.count > 0)\n          .map(({ id, name, count }) => ({\n            value: id,\n            label: `${name} ${count ? `(${count})` : ''}`,\n          }))\n      )\n    }\n  }\n\n  const handleFilterCategories = (arrayName, value) => {\n    const isHave = ['categories', 'subCategories'].includes(arrayName)\n    if (!isHave) return null\n    const filterClone = _.cloneDeep(filter)\n    const newFilter = filterClone\n    switch (arrayName) {\n      case 'categories':\n        if (value === 'all') {\n          newFilter[arrayName] = []\n        } else {\n          newFilter[arrayName] = [value]\n        }\n        newFilter.subCategories = []\n        break\n      case 'subCategories':\n        newFilter[arrayName] = [value]\n        break\n      default:\n        break\n    }\n    setFilter(newFilter)\n  }\n\n  const handleClickFreeCourse = async () => {\n    setFreeCourse((prev) => ({ freeCourse: !prev.freeCourse }))\n  }\n\n  const searchFilterCategories = () => {\n    setShowSearchInput(false)\n    if (!freeCourse.freeCourse) {\n      filter.prices = []\n      setFilter(filter)\n    } else {\n      filter.prices = ['free']\n      setFilter(filter)\n    }\n    const query = qs.stringify(filter, { encodeValuesOnly: true })\n    const { closeSearch } = props\n    if (closeSearch) {\n      closeSearch()\n    }\n    if (searchType === 'Course') {\n      if (searchInput && query) {\n        history.push(`/browse/courses?q=${searchInput}&${query}`)\n      } else if (query) {\n        history.push(`/browse/courses?${query}`)\n      } else if (searchInput) {\n        history.push(`/browse/courses?q=${searchInput}`)\n      } else {\n        history.push(`/browse/courses`)\n      }\n    } else if (searchType === 'Academy') {\n      if (searchInput) {\n        history.push(`/browse/schools?q=${searchInput}`)\n      } else {\n        history.push(`/browse/schools`)\n      }\n    }\n  }\n\n  const handleSearchInput = (event) => {\n    setSearchInput(event.target.value)\n  }\n\n  return (\n    <>\n      {/* normal mode */}\n      <Custom minWidth={769}>\n        <WrapSearchInput />\n      </Custom>\n\n      {/* to modal */}\n      <Custom maxWidth={768}>\n        <SearchLabel onClick={() => setShowSearchInput(true)} style={{ display: 'none' }}>\n          <Icon src={SearchIcon} alt=\"search-icon\" />\n        </SearchLabel>\n        <Modal\n          isOpen={showSearchInput}\n          contentStyle={{\n            zIndex: 1000,\n            top: '50%',\n            left: '50%',\n            transform: 'translate(-50% ,-50%)',\n            width: windowWidth > 425 ? 340 : '80%',\n            height: 'fit-content',\n            borderRadius: 15,\n            padding: 24,\n          }}\n        >\n          <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n            <div style={{ paddingBottom: 8 }}>\n              <Typography bold fontSize=\"text-lg\">\n                Search Course\n              </Typography>\n            </div>\n            <CloseIcon onClick={() => setShowSearchInput(false)}>\n              <img src={CancelIcon} alt=\"cancel\" />\n            </CloseIcon>\n          </div>\n          <SearchFormContainer\n            style={{\n              width: width,\n              display: 'flex',\n              flexDirection: 'column',\n              alignItems: 'flex-start',\n            }}\n          >\n            <div style={{ width: '100%' }}>\n              <Input\n                refs={inputRef}\n                // width={'255px'}\n                isIcon={true}\n                isStyle={true}\n                placeholder={`Search ${searchType}`}\n                defaultValue={query.q}\n                onChange={handleSearchInput}\n              />\n            </div>\n            <div style={{ padding: '20px 0px 8px 0px' }}>\n              <Typography bold fontSize=\"text-lg\">\n                Search By category\n              </Typography>\n            </div>\n            <Div>\n              <div style={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 16 }}>\n                <Select\n                  placeholder=\"All Categories\"\n                  width=\"100%\"\n                  height=\"180px\"\n                  value={\n                    categoryOptions.find(({ value }) => filter?.categories?.includes(value)) || null\n                  }\n                  onChange={({ value }) => handleFilterCategories('categories', value)}\n                  options={categoryOptions}\n                />\n                <Select\n                  placeholder=\"All Subcategories\"\n                  width=\"100%\"\n                  height=\"130px\"\n                  value={\n                    subCategoryOptions.find(({ value }) =>\n                      filter?.subCategories?.includes(value)\n                    ) || null\n                  }\n                  onChange={({ value }) => handleFilterCategories('subCategories', value)}\n                  options={subCategoryOptions}\n                />\n              </div>\n              <div style={{ display: 'flex', width: '100%' }}>\n                <Checkbox onClick={handleClickFreeCourse} background=\"mobile\">\n                  <CheckInput\n                    checked={freeCourse?.freeCourse}\n                    style={{ margin: '0px 8px 3px 0px', borderRadius: 20 }}\n                  />\n\n                  <div>\n                    <PureTypography bold color=\"primary2\" fontSize=\"text-sm\">\n                      Free Course Only\n                    </PureTypography>\n                  </div>\n                </Checkbox>\n              </div>\n            </Div>\n            <br />\n            <Button width=\"100%\" primary type=\"submit\" onClick={() => searchFilterCategories()}>\n              Search\n            </Button>\n          </SearchFormContainer>\n        </Modal>\n      </Custom>\n    </>\n  )\n}\n\nconst mapState = (state) => {\n  const {\n    CourseCategories: { courseCategories },\n  } = state\n  return {\n    courseCategories,\n  }\n}\n\nconst mapDispatch = ({ CourseCategories: { getCourseCategoriesWithCount } }) => ({\n  getCourseCategories: getCourseCategoriesWithCount,\n})\n\nexport default connect(mapState, mapDispatch)(Search)\n","export default __webpack_public_path__ + \"static/media/Social Icon_Website.23aa2890.svg\";","export default __webpack_public_path__ + \"static/media/ListLandingWhite.cba94422.svg\";","export default __webpack_public_path__ + \"static/media/SearchLandingWhite.d10f1428.svg\";","export default __webpack_public_path__ + \"static/media/SearchLandingBlue.503ae03a.svg\";","export default __webpack_public_path__ + \"static/media/StudentLandingBlue.fa7113f6.svg\";","export default __webpack_public_path__ + \"static/media/TeacherLandingBlue.db3d2d7a.svg\";","export default __webpack_public_path__ + \"static/media/LoginLandingBlue.28c21ae3.svg\";","export default __webpack_public_path__ + \"static/media/LoginLandingWhite.df44e078.svg\";"],"sourceRoot":""}