{"version":3,"file":"component---src-pages-caramel-caramel-color-index-tsx-5374a00dce5921c4ed85.js","mappings":"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","sources":["webpack://sethness-roquette/./src/components/Pages/TextSection/textSection.module.scss","webpack://sethness-roquette/./src/components/Pages/TextSection/TextSection.tsx","webpack://sethness-roquette/./src/components/Shared/NavList/NavList.tsx","webpack://sethness-roquette/./src/components/Shared/NavList/navList.module.scss","webpack://sethness-roquette/./src/hooks/use-effect-once.ts","webpack://sethness-roquette/./src/pages/caramel/caramel-color/index.tsx"],"sourcesContent":["// extracted by mini-css-extract-plugin\nexport var content = \"textSection-module--content--8f310\";\nexport var forceFloat = \"textSection-module--forceFloat--37079\";\nexport var image = \"textSection-module--image--d46db\";\nexport var left = \"textSection-module--left--2724f\";\nexport var right = \"textSection-module--right--36445\";\nexport var section = \"textSection-module--section--9e7f8\";\nexport var text = \"textSection-module--text--5fc00\";\nexport var title = \"textSection-module--title--a54a3\";","import clsx from 'clsx';\nimport React, {FC, ReactElement, ReactNode} from 'react';\n\nimport * as styles from './textSection.module.scss';\n\n\ntype Props = {\n  title?: string,\n  children: ReactNode,\n} & (\n  {\n    image?: ReactElement,\n    alignImage?: 'left' | 'right',\n    forceFloatImage?: boolean,\n  }\n);\n\n\nconst TextSection: FC<Props> = ({children: text, title, image, alignImage, forceFloatImage}) => (\n  <section className={styles.section}>\n    {title && <h2 className={styles.title}>{title}</h2>}\n\n    <div className={styles.content}>\n      {image && (\n        <div className={clsx(styles.image, alignImage && styles[alignImage], forceFloatImage && styles.forceFloat)}>\n          {image}\n        </div>\n      )}\n\n      <div className={styles.text}>{text}</div>\n    </div>\n  </section>\n);\n\n\nexport default TextSection;\n","import clsx from 'clsx';\nimport React, {FC, useState} from 'react';\n\nimport * as styles from './navList.module.scss';\n\n\ntype Props = {\n  items: Array<{\n    id: number,\n    title: string,\n    onClick: () => void,\n  }>,\n  selectedItem?: number,\n};\n\n\nconst NavList: FC<Props> = ({items, selectedItem}) => {\n  const [activeItem, setActiveItem] = useState(selectedItem ?? items[0].id);\n\n  const handleClick = (id: number) => {\n    setActiveItem(id);\n    items.find((item) => item.id === id)?.onClick();\n  };\n\n  return (\n    <ul className={styles.nav}>\n      {items.map((item) => (\n        <li\n          key={item.id}\n          onClick={() => handleClick(item.id)}\n          className={clsx(activeItem === item.id && styles.active)}\n        >\n          {item.title}\n        </li>\n      ))}\n    </ul>\n  );\n};\n\n\nexport default NavList;\n","// extracted by mini-css-extract-plugin\nexport var active = \"navList-module--active--f6809\";\nexport var nav = \"navList-module--nav--bb1c5\";","import {useEffect} from 'react';\n\n\nexport const useEffectOnce = (callback: () => void) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(callback, []);\n};\n","import {graphql} from 'gatsby';\r\nimport {Box} from '@mui/material';\r\nimport {convert} from 'html-to-text';\r\nimport React, {useState} from 'react';\r\nimport {useTranslation} from 'gatsby-plugin-react-i18next';\r\n\r\nimport SEO from '../../../components/Seo';\r\nimport parse from '../../../services/parse';\r\nimport {LiquidPowder} from '../../../types/data';\r\nimport {useEffectOnce} from '../../../hooks/use-effect-once';\r\nimport useSelectedArea from '../../../hooks/use-selected-area';\r\nimport NavList from '../../../components/Shared/NavList/NavList';\r\nimport ourCaramelData from '../../../assets/data/ourCaramel.json';\r\nimport PageLayout from '../../../components/Pages/PageLayout/PageLayout';\r\nimport SelectArea from '../../../components/Shared/SelectArea/SelectArea';\r\nimport TextSection from '../../../components/Pages/TextSection/TextSection';\r\nimport LiquidsPowdersInfo from '../../../components/Caramel/LiquidsPowdersInfo';\r\nimport LiquidsPowdersList from '../../../components/Caramel/LiquidsPowdersList';\r\nimport {extractData, getAllPdf, getCategoryFromUrl, getUrlQueryParams} from '../../../services/utils';\r\nimport type {PageHeadProps} from '../../../types/page';\r\nimport type {I18nTranslations} from '../../../types/i18next';\r\n\r\n\r\nconst CaramelColorPage = () => {\r\n  const {t} = useTranslation();\r\n  const allPdf = getAllPdf('all');\r\n  const queryParams = getUrlQueryParams();\r\n  const keyPrefix = ourCaramelData['caramel-color'];\r\n  const [selectedArea, setSelectedArea] = useSelectedArea();\r\n\r\n  const [category, setCategory] = useState(getCategoryFromUrl(4, 1));\r\n  const [informations, setInformations] = useState<LiquidPowder>();\r\n  const extractedData = extractData(keyPrefix, category);\r\n\r\n  const handleChangeCategory = (id: typeof category) => {\r\n    setInformations(undefined);\r\n    setCategory(id);\r\n  };\r\n\r\n  useEffectOnce(() => {\r\n    if (queryParams.product && queryParams.type) {\r\n      const data = extractData(keyPrefix, category);\r\n      // queryParams.type could be undefined because it can be changed in the URL\r\n      if (data[queryParams.type]) setInformations(data[queryParams.type][queryParams.product]);\r\n    }\r\n  });\r\n\r\n  return (\r\n    <Box sx={{pt: '3rem'}}>\r\n      <Box sx={{px: '2rem'}}>\r\n        <NavList\r\n          items={([1, 2, 3, 4] as const).map((item) => ({\r\n            id: item,\r\n            title: t(keyPrefix[`category${item}`].name as any),\r\n            onClick: () => handleChangeCategory(item),\r\n          }))}\r\n          selectedItem={category}\r\n        />\r\n      </Box>\r\n\r\n      <PageLayout title={t(keyPrefix[`category${category}`].title as any)}>\r\n        <TextSection>\r\n          {parse(t(keyPrefix[`category${category}`].description as any))}\r\n\r\n          <Box sx={{mt: '3rem'}}>\r\n            <SelectArea selectedArea={selectedArea} setSelectedArea={setSelectedArea}/>\r\n          </Box>\r\n        </TextSection>\r\n      </PageLayout>\r\n\r\n      <LiquidsPowdersInfo\r\n        allPdf={allPdf}\r\n        selectedArea={selectedArea}\r\n        informations={informations}\r\n        setInformations={setInformations}\r\n      />\r\n\r\n      <LiquidsPowdersList\r\n        data={extractedData}\r\n        selectedArea={selectedArea}\r\n        setInformations={setInformations}\r\n      />\r\n    </Box>\r\n  );\r\n};\r\n\r\n\r\nexport default CaramelColorPage;\r\n\r\n\r\nexport const Head = ({data}: PageHeadProps) => {\r\n  const translations: I18nTranslations = JSON.parse(data.locales.edges[0].node.data);\r\n\r\n  return (\r\n    <SEO\r\n      title={`${translations['caramel-color'].name} | ${translations.sethness_roquette}`}\r\n      description={convert(translations['caramel-color'].classI.description)}\r\n    />\r\n  );\r\n};\r\n\r\n\r\nexport const query = graphql`\r\n  query($language: String!, $defaultLang: String!) {\r\n    locales: allLocale(filter: {language: {in: [$language, $defaultLang]}}) {\r\n      ...I18nFragment\r\n    },\r\n  }\r\n`;\r\n"],"names":["content","forceFloat","left","right","section","_ref","children","text","title","image","alignImage","forceFloatImage","React","className","styles","clsx","items","selectedItem","activeItem","setActiveItem","useState","id","map","item","key","onClick","handleClick","find","_items$find","useEffectOnce","callback","useEffect","t","useTranslation","allPdf","getAllPdf","queryParams","getUrlQueryParams","keyPrefix","ourCaramelData","selectedArea","setSelectedArea","useSelectedArea","category","setCategory","getCategoryFromUrl","informations","setInformations","extractedData","extractData","product","type","data","Box","sx","pt","px","NavList","name","handleChangeCategory","undefined","PageLayout","TextSection","parse","description","mt","SelectArea","LiquidsPowdersInfo","LiquidsPowdersList","Head","translations","JSON","locales","edges","node","SEO","sethness_roquette","convert","classI"],"sourceRoot":""}