{"version":3,"file":"components-introCards-introCards-0b87b12b54965ff978d7.js","mappings":"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","sources":["webpack://sol-ecolution/./src/components/introCards/introCards.js","webpack://sol-ecolution/./src/components/introCards/introCardsStyles.js"],"sourcesContent":["import * as Styled from './introCardsStyles';\nimport React, { useState } from 'react';\nimport { documentToReactComponents } from '@contentful/rich-text-react-renderer';\nimport { BLOCKS } from '@contentful/rich-text-types';\nimport ContentfulAssets from '../../hooks/useContentfulAssets';\nimport './introCards.css';\nimport BlueLine from '../blueLine/blueLine';\n//Get column rows\nconst getRows=(n)=>{\n    let rows=0;\n    let number =0+(n%4);\n    while(n>=number){\n        number+=4;\n        rows++;\n    }\n    return rows;\n}\n\n//Arrange Data in column wise manner\nconst getData=(teamData)=>{\n        const len = teamData.length;\n        const rows = getRows(len);\n        const ModifiedArray = [];\n        let temp = [];\n        for(var id=0;id<len;id++){\n            if(teamData[id] && teamData[id].elementId!==''){\n                teamData[id].elementId=id;\n            }\n        }\n        \n        for(var columnNumber=0;columnNumber<4;columnNumber++){\n            var columnRowCouner=0;\n            \n            for(var rownumber = 1;rownumber<=rows;rownumber++){\n                temp.push(teamData[columnNumber+columnRowCouner]?teamData[columnNumber+columnRowCouner]:null);\n                columnRowCouner +=4;\n            }\n            ModifiedArray.push(temp);\n            temp=[];\n            \n        }\n    return ModifiedArray;\n}\n\nfunction scrollToMyDiv(element) {\n    document.getElementById(element).scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n}\n\nconst IntroCards = ({ sectionData }) => {\n    const [toggle, setToggle] = useState({});\n        function toggleFunction(id) {\n            setToggle({\n                \n                [id]: !toggle[id],\n            });\n            scrollToMyDiv(id);\n            }\n        \n    const data = getData(sectionData?.list);\n    \n        const optionsMainStyle = {\n        renderNode: {\n            [BLOCKS.EMBEDDED_ASSET]: (node) => {\n                const asset = ContentfulAssets(node.data.target.sys.id);\n                if (asset) {\n                return (\n                    <Styled.Image\n                    src={asset.node.file.url}\n                    alt={asset.node.title}\n                    />\n                );\n                }\n            },\n            [BLOCKS.HEADING_2]: (node, children) => (\n                <Styled.Name>{children}</Styled.Name>\n            ),\n            [BLOCKS.HEADING_3]: (node, children) => (\n                <Styled.Title>{children}</Styled.Title>\n            ),\n            [BLOCKS.HEADING_5]: (node, children) => (\n                <Styled.Info style={{display:'none'}}>{children}</Styled.Info>\n            )\n        },\n        renderText: (text) =>\n        text.split('\\n').flatMap((text, i) => [i > 0 && <br />, text]),\n    };\n\n    const optionsParagraphStyle = {\n        renderNode: {\n            [BLOCKS.HEADING_2]: (node, children) => (\n                <Styled.Name style={{display:'none'}}>{children}</Styled.Name>\n            ),\n            [BLOCKS.HEADING_3]: (node, children) => (\n                <Styled.Title style={{display:'none'}}>{children}</Styled.Title>\n            ),\n            [BLOCKS.HEADING_5]: (node, children) => (\n                <Styled.Info>{children}</Styled.Info>\n            )\n            \n        },\n        renderText: (text) =>\n        text.split('\\n').flatMap((text, i) => [i > 0 && <br />, text]),\n    };\n    return sectionData?.list?.length>0 && (\n        <Styled.MainDiv>\n            <BlueLine/>\n            <Styled.Header>\n                Our Team\n            </Styled.Header>\n            <Styled.CardContainer>\n            {data?.map((item,index)=>{\n                return(\n                <div key={index}>\n                    {\n                        item?.map((bio,indexz)=>{\n                                return(bio &&\n                                    <Styled.Card key={bio?.elementIddex} className={`${ toggle[bio?.elementId] ? \"active\" : \"\"}`}>\n                                    <button onClick={() => toggleFunction(bio?.elementId)} className={`button ${ toggle[bio?.elementId] ? \"active\" : \"\"}`}>\n                                        <span></span>\n                                        <span></span>\n                                    </button>\n                                        {documentToReactComponents(\n                                        JSON.parse(bio?.contentDetails.raw),\n                                        optionsMainStyle\n                                        )}\n                                        \n                                    <p style={{ display: toggle[bio?.elementId] ? 'block' : 'none' }}>\n                                    {documentToReactComponents(\n                                        JSON.parse(bio?.contentDetails.raw),\n                                        optionsParagraphStyle\n                                        )}    \n                                    </p>\n                                \n                                    </Styled.Card>\n                                );\n                            })\n                    }\n                </div>\n                );\n            })}\n            </Styled.CardContainer>\n            <Styled.CardContainerMobile>\n                    {\n                        sectionData?.list?.map((bio,indexz)=>{\n                                return(bio &&\n                                    <Styled.Card key={bio?.elementIndex} className={`${ toggle[bio?.elementId] ? \"active\" : \"\"}`} id={bio?.elementId}>\n                                    <button onClick={() => {toggleFunction(bio?.elementId); setTimeout(() => {\n                                    scrollToMyDiv(bio?.elementId);    \n                                    }, 10);}} className={`button ${ toggle[bio?.elementId] ? \"active\" : \"\"}`}>\n                                        <span></span>\n                                        <span></span>\n                                    </button>\n                                        {documentToReactComponents(\n                                        JSON.parse(bio?.contentDetails?.raw),\n                                        optionsMainStyle\n                                        )}\n                                        \n                                    <p style={{ display: toggle[bio?.elementId] ? 'block' : 'none' }}>\n                                    {documentToReactComponents(\n                                        JSON.parse(bio?.contentDetails?.raw),\n                                        optionsParagraphStyle\n                                        )}    \n                                    </p>\n                                \n                                    </Styled.Card>\n                                );\n                            })\n                    }\n            </Styled.CardContainerMobile>\n        </Styled.MainDiv>\n    );\n    };\n\n\nexport default IntroCards;","import styled from \"styled-components\";\n\nexport const MainDiv = styled.div`\n  margin: 2% 10%;\n  padding: 0;\n\n  @media (max-width: 768px) {\n    margin: 2% 0%;\n  }\n`;\n\nexport const CardContainer = styled.div`\n  display: grid;\n  justify-items: center;\n  grid-template-columns: auto auto auto auto;\n  //grid-gap: 50px;\n  grid-gap: 20px;\n  @media (max-width: 768px) {\n    display:none;\n  }\n`;\n\nexport const CardContainerMobile = styled.div`\ndisplay: none;\n@media (max-width: 768px) {\n  display:grid;\n  justify-items: center;\n  grid-gap: 20px;\n  grid-template-columns: auto;\n}\n`;\n\nexport const Card = styled.div`\n  margin-bottom: 35px;\n  @media (max-width: 768px) {\n    padding: 25px;\n    margin-bottom: 0px;\n    scroll-margin:95px;\n    &.active {\n      background: #fff;\n      box-shadow: 0px 0px 10px 1px #93939385;\n    }\n  }\n`;\n\nexport const Name = styled.div`\n  font-weight: bold;\n  font-size: 20px;\n  color:var(--font-color);\n  margin-top: 15px;\n  @media (max-width: 1440px) {\n    font-size: 14px;\n  }\n\n  @media (max-width: 768px) {\n    text-align: center;\n    font-size: 20px;\n  }\n`;\n\nexport const Title = styled.h3`\n  color: #007dc3;\n  font-size: 14px;\n  @media (max-width: 1024px) {\n    font-size: 9px;\n  }\n  @media (max-width: 768px) {\n    text-align: center;\n    font-size: 14px;\n  }\n`;\n\nexport const Info = styled.div`\n  padding: 10px;\n  margin-top: -10px;\n  box-shadow: 0px 8px 7px 0px #b1b1b152;\n  font-size: 16px;\n  width: 300px;\n  color:var(--font-color);\n  @media (max-width: 1530px) {\n    width: 220px;\n  }\n  @media (max-width: 1440px) {\n    font-size: 12px;\n  }\n  @media (max-width: 1024px) {\n    width: 150px;\n    font-size: 10px;\n  }\n  @media (max-width: 768px) {\n    width: 380px;\n    font-size: 14px;\n    box-shadow: none;\n  }\n  @media (max-width: 425px) {\n    width: 220px;\n  }\n`;\n\nexport const Image = styled.img`\n  width: 300px;\n  @media (max-width: 1530px) {\n    width: 220px;\n  }\n  @media (max-width: 1024px) {\n    width: 150px;\n  }\n  @media (max-width: 768px) {\n    width: 380px;\n  }\n  @media (max-width: 425px) {\n    width: 220px;\n  }\n`;\n\nexport const Header = styled.h1`\n  font-size: 50px;\n  font-weight: bold;\n  margin: 40px;\n  @media (max-width: 1440px) {\n    font-size: 34px;\n  }\n  @media (max-width: 768px) {\n    text-align: center;\n  }\n  @media (max-width: 425px) {\n    font-size: 38px;\n  }\n`;\n\n"],"names":["scrollToMyDiv","element","document","getElementById","scrollIntoView","behavior","block","sectionData","useState","toggle","setToggle","toggleFunction","id","data","teamData","len","length","rows","n","number","getRows","ModifiedArray","temp","elementId","columnNumber","columnRowCouner","rownumber","push","getData","list","optionsMainStyle","renderNode","BLOCKS","node","asset","ContentfulAssets","target","sys","src","file","url","alt","title","children","style","display","renderText","text","split","flatMap","i","optionsParagraphStyle","map","item","index","key","bio","indexz","elementIddex","className","onClick","documentToReactComponents","JSON","parse","contentDetails","raw","elementIndex","setTimeout","MainDiv","styled","CardContainer","CardContainerMobile","Card","Name","Title","Info","Image","Header"],"sourceRoot":""}