{"version":3,"file":"c7b1af92.js","mappings":"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","sources":["webpack://audioeye-web/./src/components/pageSlices/FeaturedTabs.jsx"],"sourcesContent":["/* eslint-disable indent */\nimport React, { useState } from 'react'\nimport { graphql } from 'gatsby'\nimport styled from '@emotion/styled'\nimport { css } from '@emotion/react'\nimport kebabCase from 'lodash/kebabCase'\nimport { RichText } from 'prismic-reactjs'\n\nimport { theme } from '../../styles'\nimport Text from '../common/Text'\nimport Space from '../common/Space'\nimport getImage from '../../utils/getImage'\n\nconst Wrapper = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 80px 0px;\n  padding-top: ${p => (p.hasTopPadding ? '80px' : '0px')};\n  padding-bottom: ${p => (p.hasBottomPadding ? '80px' : '0px')};\n\n  @media (max-width: 1050px) {\n    width: 100%;\n    margin-left: 0px;\n    padding-top: ${p => (p.hasTopPadding ? '48px' : '0px')};\n    padding-bottom: ${p => (p.hasBottomPadding ? '48px' : '0px')};\n  }\n\n  @media (max-width: 800px) {\n    padding-top: ${p => (p.hasTopPadding ? '40px' : '0px')};\n    padding-bottom: ${p => (p.hasBottomPadding ? '40px' : '0px')};\n  }\n`\n\nconst BG = styled.div`\n  position: absolute;\n  width: 500vw;\n  height: 100%;\n  margin-left: -300%;\n  top: 0;\n  z-index: -1;\n  background-color: ${p => p.theme.color[p.bgColor]};\n\n  @media (max-width: 1050px) {\n    margin-left: -100%;\n  }\n`\n\nconst Header = styled.div`\n  max-width: 900px;\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n  align-items: center;\n`\n\nconst TabWrapper = styled.div`\n  width: 100%;\n  margin-top: 40px;\n  z-index: 2;\n  &:focus {\n    outline: none;\n  }\n\n  @media (max-width: 1050px) {\n    margin-top: 24px;\n  }\n\n  @media (max-width: 800px) {\n    margin-top: 0px;\n  }\n`\n\nconst TabButtonWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  background-color: ${p => theme.color[p.backgroundColor]};\n  border-radius: 8px;\n  padding: 16px;\n\n  @media (max-width: 1050px) {\n    padding: 0 32px;\n  }\n\n  @media (max-width: 800px) {\n    padding: 0 12px;\n  }\n`\n\nconst TabButton = styled.button`\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  padding: 8px;\n  margin: 0px 5px;\n  background-color: ${p => p.theme.color[p.tabColor]};\n  border-radius: 8px;\n  position: relative;\n\n  &:first-of-type {\n    margin-left: 0px;\n  }\n  &:last-child {\n    margin-right: 0px;\n  }\n\n  p {\n    color: ${theme.color.offBlack};\n    margin-bottom: 0px !important;\n  }\n\n  ${p =>\n    p.selected &&\n    css`\n      background-color: ${theme.color.purple500};\n      border: 3px solid ${theme.color.purple500};\n      box-shadow: none;\n      p {\n        color: ${theme.color.white};\n      }\n    `}\n\n  @media (max-width: 1050px) {\n    padding: 10px;\n  }\n\n  @media (max-width: 800px) {\n    margin: 0px 2px;\n    padding: 4px;\n  }\n`\n\nconst TabButtonText = styled(Text)`\n  @media (max-width: 1050px) {\n    ${p =>\n      p.selected &&\n      css`\n        display: none;\n      `};\n  }\n  @media (max-width: 500px) {\n    p {\n      font-size: ${p => p.theme.fonts.size.tinyBody}!important;\n    }\n  }\n`\n\nconst Icon = styled.img`\n  display: none;\n\n  @media (max-width: 1050px) {\n    ${p =>\n      p.selected &&\n      css`\n        display: flex;\n        max-width: 60px;\n        min-width: 45px;\n        max-height: 60px;\n        object-fit: contain;\n        width: 100%;\n      `}\n  }\n`\n\nconst TabPanelWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  background-color: ${p => p.theme.color[p.panelColor]};\n  align-items: flex-start;\n  padding: 64px 16px 0px 16px;\n  border: 3px solid transparent;\n\n  &:focus {\n    outline: ${theme.focusOutline};\n  }\n\n  ${p =>\n    !p.selectedTab &&\n    css`\n      height: 0px !important;\n      min-height: 0px;\n      visibility: hidden;\n    `}\n\n  @media (max-width: 1350px) {\n    min-height: 425px;\n  }\n\n  @media (max-width: 1050px) {\n    padding: 0px;\n  }\n\n  @media (max-width: 800px) {\n    min-height: 350px;\n  }\n`\n\nconst PanelTextWrapper = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  ul {\n    text-align: left;\n    padding-left: 20px;\n  }\n  p {\n    margin-bottom: 0px;\n  }\n\n  @media (max-width: 1050px) {\n    align-items: center;\n    padding: 24px;\n  }\n\n  @media (max-width: 500px) {\n    padding: 24px 12px;\n  }\n`\n\nconst PanelTitleText = styled(Text)`\n  margin-bottom: 16px;\n  p {\n    margin-bottom: 0px !important;\n  }\n`\n\nconst PanelImageWrapper = styled.div`\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n\n  @media (max-width: 1050px) {\n    display: none;\n  }\n`\n\nconst PanelImage = styled.img``\n\nconst modifyColors = bgColor => {\n  switch (bgColor) {\n    case 'offWhite':\n      return {\n        backgroundColor: 'offWhite',\n        tabColor: 'white',\n      }\n    case 'white':\n      return {\n        backgroundColor: 'white',\n        tabColor: 'offWhite',\n      }\n    default:\n      return {\n        backgroundColor: 'white',\n        tabColor: 'offWhite',\n      }\n  }\n}\n\nconst TabButtonComponent = ({\n  tabTitle,\n  selectedTab,\n  setSelectedTab,\n  selectedTabMobileIcon,\n  tabItems,\n  tabColor,\n  index,\n}) => {\n  const tabTitleText = kebabCase(tabTitle.props.render[0].text)\n  const isSelected = selectedTab === tabTitleText\n\n  return (\n    <TabButton\n      selected={isSelected}\n      onClick={() => setSelectedTab(tabTitleText)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      id={tabTitleText}\n      aria-controls={`${tabTitleText}-panel`}\n      tabIndex={isSelected ? null : -1}\n      tabColor={tabColor}\n      onKeyDown={e => {\n        if (e.key === 'ArrowRight' && index < tabItems.length - 1) {\n          e.target.nextElementSibling.focus()\n        }\n        if (e.key === 'ArrowLeft' && index > 0) {\n          e.target.previousElementSibling.focus()\n        }\n      }}\n    >\n      <TabButtonText center font=\"bodyHeavy\" selected={isSelected} richText>\n        {tabTitle}\n      </TabButtonText>\n      {getImage(selectedTabMobileIcon, Icon, { selected: isSelected })}\n    </TabButton>\n  )\n}\n\nconst TabPanelComponent = ({ tabTitle, tabPanelTitle, tabPanelText, tabPanelImage, selectedTab, backgroundColor }) => {\n  const tabTitleText = kebabCase(tabTitle.props.render[0].text)\n  const isSelected = selectedTab === tabTitleText\n\n  return (\n    <TabPanelWrapper\n      selectedTab={isSelected}\n      id={`${tabTitleText}-panel`}\n      role=\"tabpanel\"\n      aria-labelledby={tabTitleText}\n      tabIndex={isSelected ? 0 : -1}\n      hidden={!isSelected}\n      panelColor={backgroundColor}\n      className=\"focus-outline\"\n    >\n      <PanelImageWrapper>{getImage(tabPanelImage, PanelImage, { noAlt: true })}</PanelImageWrapper>\n      <Space width={16} tabletWidth={0} />\n      <PanelTextWrapper>\n        <PanelTitleText font=\"heading3\" role=\"heading\" aria-level=\"3\" richText>\n          {tabPanelTitle}\n        </PanelTitleText>\n        <Text font=\"body\" richText>\n          {tabPanelText}\n        </Text>\n      </PanelTextWrapper>\n    </TabPanelWrapper>\n  )\n}\n\nconst FeaturedTabs = ({ items, primary }) => {\n  const title = <RichText render={primary.title1.richText} />\n  const subtitle = <RichText render={primary.subtitle.richText} />\n  const { color } = primary\n  const anchorId = primary.anchor_id\n  const hasTopPadding = primary?.has_top_padding\n  const hasBottomPadding = primary?.has_bottom_padding\n\n  const tabs = items.map(item => kebabCase(item.tab_title.text))\n  const [selectedTab, setSelectedTab] = useState(tabs[0])\n  const modifiedColor = modifyColors(color)\n\n  return (\n    <Wrapper\n      id={anchorId || null}\n      hasTopPadding={hasTopPadding === null ? true : hasTopPadding}\n      hasBottomPadding={hasBottomPadding === null ? true : hasBottomPadding}\n    >\n      <Header>\n        <Text font=\"heading2\" center richText>\n          {title}\n        </Text>\n        <Space height={16} />\n        {subtitle && (\n          <>\n            <Text font=\"body\" center richText>\n              {subtitle}{' '}\n            </Text>\n            <Space height={0} tabletHeight={24} />\n          </>\n        )}\n      </Header>\n      <TabWrapper>\n        <TabButtonWrapper role=\"tablist\" backgroundColor={modifiedColor.tabColor}>\n          {items &&\n            items.map((item, i) => (\n              <TabButtonComponent\n                index={i}\n                tabItems={items}\n                tabTitle={<RichText render={item.tab_title.richText} />}\n                id={kebabCase(item.tab_title.text)}\n                selectedTab={selectedTab}\n                setSelectedTab={setSelectedTab}\n                selectedTabMobileIcon={item.active_mobile_tab_icon}\n                tabColor={modifiedColor.tabColor}\n                key={item.tab_title.text}\n              />\n            ))}\n        </TabButtonWrapper>\n        {items &&\n          items.map((item, i) => (\n            <React.Fragment key={item.tab_title.text}>\n              <TabPanelComponent\n                tabTitle={<RichText render={item.tab_title.richText} />}\n                tabPanelTitle={<RichText render={item.tab_panel_title.richText} />}\n                tabPanelText={<RichText render={item.tab_panel_text.richText} />}\n                tabPanelImage={item.tab_panel_image}\n                tabMobileIcon={item.mobile_tab_icon}\n                selectedTab={selectedTab}\n                backgroundColor={modifiedColor.backgroundColor}\n              />\n            </React.Fragment>\n          ))}\n      </TabWrapper>\n      <BG\n        className=\"bg\"\n        bgColor={modifiedColor.backgroundColor}\n        hasTopPadding={hasTopPadding === null ? true : hasTopPadding}\n      />\n    </Wrapper>\n  )\n}\n\nexport default FeaturedTabs\n\nexport const query = graphql`\n  fragment FeaturedTabs on PrismicPageDataBodyFeaturedTabs {\n    ...SliceBase\n    items {\n      active_mobile_tab_icon {\n        alt\n        url\n        gatsbyImageData(width: 60)\n      }\n      tab_panel_image {\n        alt\n        url\n        gatsbyImageData(width: 540)\n      }\n      tab_panel_text {\n        ...TextContent\n      }\n      tab_panel_title {\n        ...TextContent\n      }\n      tab_title {\n        ...TextContent\n      }\n    }\n    primary {\n      anchor_id\n      has_top_padding\n      has_bottom_padding\n      color\n      subtitle {\n        ...TextContent\n      }\n      title1 {\n        ...TextContent\n      }\n    }\n  }\n`\n"],"names":["Wrapper","p","hasTopPadding","hasBottomPadding","BG","theme","color","bgColor","Header","TabWrapper","TabButtonWrapper","backgroundColor","TabButton","tabColor","selected","css","TabButtonText","Text","fonts","size","tinyBody","Icon","TabPanelWrapper","panelColor","selectedTab","PanelTextWrapper","PanelTitleText","PanelImageWrapper","PanelImage","TabButtonComponent","tabTitle","setSelectedTab","selectedTabMobileIcon","tabItems","index","tabTitleText","kebabCase","props","render","text","isSelected","onClick","role","id","tabIndex","onKeyDown","e","key","length","target","nextElementSibling","focus","previousElementSibling","center","font","richText","getImage","TabPanelComponent","tabPanelTitle","tabPanelText","tabPanelImage","hidden","className","noAlt","width","tabletWidth","items","primary","title","RichText","title1","subtitle","anchorId","anchor_id","has_top_padding","has_bottom_padding","tabs","map","item","tab_title","useState","modifiedColor","height","tabletHeight","i","active_mobile_tab_icon","tab_panel_title","tab_panel_text","tab_panel_image","tabMobileIcon","mobile_tab_icon"],"sourceRoot":""}