{"ast":null,"code":"import _objectSpread from\"C:/Users/user/Desktop/02portreact/node_modules/@babel/runtime/helpers/esm/objectSpread2.js\";import _slicedToArray from\"C:/Users/user/Desktop/02portreact/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";import React,{useEffect,useState}from\"react\";import UseFetch from\"../../../../../hooks/useFetch\";import{FontAwesomeIcon}from\"@fortawesome/react-fontawesome\";import{faAngleRight}from\"@fortawesome/free-solid-svg-icons\";import Slider from\"react-slick\";import{useRef}from\"react\";import ScrollMagic from\"scrollmagic\";import{gsap}from\"gsap\";import{ScrollTrigger}from\"gsap/ScrollTrigger\";import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var Realisation=function Realisation(){var _UseFetch=UseFetch(\"/realisation.json\"),data=_UseFetch.data,error=_UseFetch.error;var _useState=useState(0),_useState2=_slicedToArray(_useState,2),currentItem=_useState2[0],setCurrentItem=_useState2[1];if(error){console.log(\"Error fetch data\");}var settings={dots:false,infinite:true,speed:500,slidesToShow:1,arrows:false,fade:true};var sliderRef=useRef();var handleNext=function handleNext(){sliderRef.current.slickNext();};var handlePrev=function handlePrev(){sliderRef.current.slickPrev();};gsap.registerPlugin(ScrollTrigger);useEffect(function(){gsap.to(\".ff\",{x:\"200%\",scrollTrigger:{duration:0.8,trigger:\".ff\",// L'élément qui déclenchera l'animation\nstart:\"center bottom\",end:\"center center\",// markers: true,\nscrub:false,triggerOnce:true}});});return/*#__PURE__*/_jsx(\"div\",{className:\"scroll\",children:/*#__PURE__*/_jsx(Slider,_objectSpread(_objectSpread({},settings),{},{ref:sliderRef,children:data.map(function(item,index){return/*#__PURE__*/_jsx(\"div\",{children:/*#__PURE__*/_jsxs(\"div\",{className:\"carousel-container relative h-96   \",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"carousel-item flex  lg:space-x-2  w-full max-sm:flex-col max-lg:space-y-2 \",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"imgPortfolio absolute md:h-96 lg:w-2/3 lg:h-full xl:h-full max-sm:relative   max-lg:w-full  flex  rounded-2xl \",children:[/*#__PURE__*/_jsx(\"button\",{id:\"preview\",className:\"absolute backdrop-blur-xl cursor-pointer\",onClick:handlePrev,children:/*#__PURE__*/_jsx(FontAwesomeIcon,{className:\"nextPre\",icon:faAngleRight,rotation:180,style:{color:\"#ec69c3\"}})}),/*#__PURE__*/_jsx(\"img\",{src:item.imageSrc,alt:item.titre01,className:\"carouselImg w-full \"}),/*#__PURE__*/_jsx(\"button\",{id:\"next\",className:\"absolute backdrop-blur-xl\",onClick:handleNext,children:/*#__PURE__*/_jsx(FontAwesomeIcon,{icon:faAngleRight,className:\"nextPre\",style:{color:\"#ec69c3\"}})})]}),/*#__PURE__*/_jsxs(\"div\",{className:\" triggerss ff max-md:hidden h-96 responsiTitreDescrip lg:w-1/3 p-2   2xl:flex  \",children:[/*#__PURE__*/_jsxs(\"div\",{className:\" 2xl:w-2/3\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"h-1/4 \",children:[/*#__PURE__*/_jsx(\"h4\",{children:item.titre01}),/*#__PURE__*/_jsx(\"h5\",{})]}),/*#__PURE__*/_jsx(\"div\",{className:\"w-full h-3/4  flex\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"w-2/3  flex flex-col space-y-3   mt-9 text-xl \",children:[/*#__PURE__*/_jsxs(\"p\",{className:\"text-justify mt-1 px-1\",children:[\" \",item.description01]}),/*#__PURE__*/_jsx(\"p\",{className:\"text-justify mt-1 px-1\",children:item.description02})]})})]}),Array.isArray(item.img)&&item.img.length>0?/*#__PURE__*/_jsxs(\"div\",{className:\"logoHome flex flex-col f 2xl:w-1/3 \",children:[/*#__PURE__*/_jsx(\"h3\",{children:\"technologies\"}),/*#__PURE__*/_jsx(\"div\",{className:\"flex flex-wrap mt-10\",children:item.img.map(function(imgSrc,imgIndex){return/*#__PURE__*/_jsx(\"img\",{className:\"logoHomei\",src:imgSrc,alt:\"Image \".concat(imgIndex)},imgIndex);})})]}):/*#__PURE__*/_jsxs(\"div\",{className:\"logoHome 2xl:w-1/3 \",children:[/*#__PURE__*/_jsx(\"h3\",{children:\"technologies\"}),/*#__PURE__*/_jsx(\"p\",{children:\"Aucune image disponible.\"})]})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"carousel-buttons\"})]})},index);})}))});};export default Realisation;","map":{"version":3,"names":["React","useEffect","useState","UseFetch","FontAwesomeIcon","faAngleRight","Slider","useRef","ScrollMagic","gsap","ScrollTrigger","jsx","_jsx","jsxs","_jsxs","Realisation","_UseFetch","data","error","_useState","_useState2","_slicedToArray","currentItem","setCurrentItem","console","log","settings","dots","infinite","speed","slidesToShow","arrows","fade","sliderRef","handleNext","current","slickNext","handlePrev","slickPrev","registerPlugin","to","x","scrollTrigger","duration","trigger","start","end","scrub","triggerOnce","className","children","_objectSpread","ref","map","item","index","id","onClick","icon","rotation","style","color","src","imageSrc","alt","titre01","description01","description02","Array","isArray","img","length","imgSrc","imgIndex","concat"],"sources":["C:/Users/user/Desktop/02portreact/src/components/pages/home/components/04portefolio/presentation/realisation.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport UseFetch from \"../../../../../hooks/useFetch\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faAngleRight } from \"@fortawesome/free-solid-svg-icons\";\r\nimport Slider from \"react-slick\";\r\nimport { useRef } from \"react\";\r\nimport ScrollMagic from \"scrollmagic\";\r\nimport { gsap } from \"gsap\";\r\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\r\n\r\nconst Realisation = () => {\r\n  const { data, error } = UseFetch(\"/realisation.json\");\r\n  const [currentItem, setCurrentItem] = useState(0);\r\n\r\n  if (error) {\r\n    console.log(\"Error fetch data\");\r\n  }\r\n  const settings = {\r\n    dots: false,\r\n    infinite: true,\r\n    speed: 500,\r\n    slidesToShow: 1,\r\n    arrows: false,\r\n    fade: true,\r\n  };\r\n  const sliderRef = useRef();\r\n\r\n  const handleNext = () => {\r\n    sliderRef.current.slickNext();\r\n  };\r\n\r\n  const handlePrev = () => {\r\n    sliderRef.current.slickPrev();\r\n  };\r\n\r\n\r\n  gsap.registerPlugin(ScrollTrigger);\r\n\r\n  useEffect(()=>{\r\n   \r\n    gsap.to(\".ff\", {\r\n      x: \"200%\",\r\n      scrollTrigger: {\r\n        duration: 0.8,\r\n        trigger: \".ff\", // L'élément qui déclenchera l'animation\r\n  \r\n       start:\"center bottom\",\r\n       end:\"center center\",\r\n        // markers: true,\r\n        scrub: false,\r\n        triggerOnce: true,\r\n      },\r\n  })\r\n \r\n  });\r\n \r\n\r\n  return (\r\n    <div className=\"scroll\">\r\n      <Slider {...settings} ref={sliderRef}>\r\n        {data.map((item, index) => (\r\n          <div key={index}>\r\n            <div className=\"carousel-container relative h-96   \" >\r\n              <div className=\"carousel-item flex  lg:space-x-2  w-full max-sm:flex-col max-lg:space-y-2 \">\r\n                <div className=\"imgPortfolio absolute md:h-96 lg:w-2/3 lg:h-full xl:h-full max-sm:relative   max-lg:w-full  flex  rounded-2xl \">\r\n                  <button\r\n                    id=\"preview\"\r\n                    className=\"absolute backdrop-blur-xl cursor-pointer\"\r\n                    onClick={handlePrev}\r\n               \r\n                  >\r\n                    <FontAwesomeIcon\r\n                      className=\"nextPre\"\r\n                      icon={faAngleRight}\r\n                      rotation={180}\r\n                      style={{ color: \"#ec69c3\" }}\r\n                    />\r\n                  </button>\r\n\r\n                  <img\r\n                    src={item.imageSrc}\r\n                    alt={item.titre01}\r\n                    className=\"carouselImg w-full \"\r\n                  />\r\n\r\n                  <button\r\n                    id=\"next\"\r\n                    className=\"absolute backdrop-blur-xl\"\r\n                    onClick={handleNext}\r\n                  >\r\n                    <FontAwesomeIcon\r\n                      icon={faAngleRight}\r\n                      className=\"nextPre\"\r\n                      style={{ color: \"#ec69c3\" }}\r\n                    />\r\n                  </button>\r\n                </div>\r\n\r\n                <div className=\" triggerss ff max-md:hidden h-96 responsiTitreDescrip lg:w-1/3 p-2   2xl:flex  \" >\r\n                  <div className=\" 2xl:w-2/3\">\r\n                    <div className=\"h-1/4 \">\r\n                      <h4>{item.titre01}</h4>\r\n                      <h5></h5>\r\n                    </div>\r\n                    <div className=\"w-full h-3/4  flex\">\r\n                    <div className=\"w-2/3  flex flex-col space-y-3   mt-9 text-xl \">\r\n                      <p className=\"text-justify mt-1 px-1\">\r\n                        {\" \"}\r\n                        {item.description01}\r\n                      </p>\r\n                      <p className=\"text-justify mt-1 px-1\">\r\n                        {item.description02}\r\n                      </p>\r\n                    </div>\r\n\r\n                    </div>\r\n                  </div>\r\n                  {Array.isArray(item.img) && item.img.length > 0 ? (\r\n                    <div className=\"logoHome flex flex-col f 2xl:w-1/3 \">\r\n                      <h3>technologies</h3>\r\n                    \r\n                      <div className=\"flex flex-wrap mt-10\">\r\n                        {item.img.map((imgSrc, imgIndex) => (\r\n                          <img className=\"logoHomei\" key={imgIndex} src={imgSrc} alt={`Image ${imgIndex}`} />\r\n                        ))}\r\n                    \r\n\r\n                      </div>\r\n                    </div>\r\n                  ) : (\r\n                    <div className=\"logoHome 2xl:w-1/3 \">\r\n                      <h3>technologies</h3>\r\n                      <p>Aucune image disponible.</p>\r\n                    </div>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            \r\n              <div className=\"carousel-buttons\"></div>\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </Slider>\r\n\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Realisation;\r\n"],"mappings":"6OAAA,MAAO,CAAAA,KAAK,EAAIC,SAAS,CAAEC,QAAQ,KAAQ,OAAO,CAClD,MAAO,CAAAC,QAAQ,KAAM,+BAA+B,CACpD,OAASC,eAAe,KAAQ,gCAAgC,CAChE,OAASC,YAAY,KAAQ,mCAAmC,CAChE,MAAO,CAAAC,MAAM,KAAM,aAAa,CAChC,OAASC,MAAM,KAAQ,OAAO,CAC9B,MAAO,CAAAC,WAAW,KAAM,aAAa,CACrC,OAASC,IAAI,KAAQ,MAAM,CAC3B,OAASC,aAAa,KAAQ,oBAAoB,CAAC,OAAAC,GAAA,IAAAC,IAAA,gCAAAC,IAAA,IAAAC,KAAA,yBAEnD,GAAM,CAAAC,WAAW,CAAG,QAAd,CAAAA,WAAWA,CAAA,CAAS,CACxB,IAAAC,SAAA,CAAwBb,QAAQ,CAAC,mBAAmB,CAAC,CAA7Cc,IAAI,CAAAD,SAAA,CAAJC,IAAI,CAAEC,KAAK,CAAAF,SAAA,CAALE,KAAK,CACnB,IAAAC,SAAA,CAAsCjB,QAAQ,CAAC,CAAC,CAAC,CAAAkB,UAAA,CAAAC,cAAA,CAAAF,SAAA,IAA1CG,WAAW,CAAAF,UAAA,IAAEG,cAAc,CAAAH,UAAA,IAElC,GAAIF,KAAK,CAAE,CACTM,OAAO,CAACC,GAAG,CAAC,kBAAkB,CAAC,CACjC,CACA,GAAM,CAAAC,QAAQ,CAAG,CACfC,IAAI,CAAE,KAAK,CACXC,QAAQ,CAAE,IAAI,CACdC,KAAK,CAAE,GAAG,CACVC,YAAY,CAAE,CAAC,CACfC,MAAM,CAAE,KAAK,CACbC,IAAI,CAAE,IACR,CAAC,CACD,GAAM,CAAAC,SAAS,CAAG1B,MAAM,CAAC,CAAC,CAE1B,GAAM,CAAA2B,UAAU,CAAG,QAAb,CAAAA,UAAUA,CAAA,CAAS,CACvBD,SAAS,CAACE,OAAO,CAACC,SAAS,CAAC,CAAC,CAC/B,CAAC,CAED,GAAM,CAAAC,UAAU,CAAG,QAAb,CAAAA,UAAUA,CAAA,CAAS,CACvBJ,SAAS,CAACE,OAAO,CAACG,SAAS,CAAC,CAAC,CAC/B,CAAC,CAGD7B,IAAI,CAAC8B,cAAc,CAAC7B,aAAa,CAAC,CAElCT,SAAS,CAAC,UAAI,CAEZQ,IAAI,CAAC+B,EAAE,CAAC,KAAK,CAAE,CACbC,CAAC,CAAE,MAAM,CACTC,aAAa,CAAE,CACbC,QAAQ,CAAE,GAAG,CACbC,OAAO,CAAE,KAAK,CAAE;AAEjBC,KAAK,CAAC,eAAe,CACrBC,GAAG,CAAC,eAAe,CAClB;AACAC,KAAK,CAAE,KAAK,CACZC,WAAW,CAAE,IACf,CACJ,CAAC,CAAC,CAEF,CAAC,CAAC,CAGF,mBACEpC,IAAA,QAAKqC,SAAS,CAAC,QAAQ,CAAAC,QAAA,cACrBtC,IAAA,CAACN,MAAM,CAAA6C,aAAA,CAAAA,aAAA,IAAKzB,QAAQ,MAAE0B,GAAG,CAAEnB,SAAU,CAAAiB,QAAA,CAClCjC,IAAI,CAACoC,GAAG,CAAC,SAACC,IAAI,CAAEC,KAAK,qBACpB3C,IAAA,QAAAsC,QAAA,cACEpC,KAAA,QAAKmC,SAAS,CAAC,qCAAqC,CAAAC,QAAA,eAClDpC,KAAA,QAAKmC,SAAS,CAAC,4EAA4E,CAAAC,QAAA,eACzFpC,KAAA,QAAKmC,SAAS,CAAC,gHAAgH,CAAAC,QAAA,eAC7HtC,IAAA,WACE4C,EAAE,CAAC,SAAS,CACZP,SAAS,CAAC,0CAA0C,CACpDQ,OAAO,CAAEpB,UAAW,CAAAa,QAAA,cAGpBtC,IAAA,CAACR,eAAe,EACd6C,SAAS,CAAC,SAAS,CACnBS,IAAI,CAAErD,YAAa,CACnBsD,QAAQ,CAAE,GAAI,CACdC,KAAK,CAAE,CAAEC,KAAK,CAAE,SAAU,CAAE,CAC7B,CAAC,CACI,CAAC,cAETjD,IAAA,QACEkD,GAAG,CAAER,IAAI,CAACS,QAAS,CACnBC,GAAG,CAAEV,IAAI,CAACW,OAAQ,CAClBhB,SAAS,CAAC,qBAAqB,CAChC,CAAC,cAEFrC,IAAA,WACE4C,EAAE,CAAC,MAAM,CACTP,SAAS,CAAC,2BAA2B,CACrCQ,OAAO,CAAEvB,UAAW,CAAAgB,QAAA,cAEpBtC,IAAA,CAACR,eAAe,EACdsD,IAAI,CAAErD,YAAa,CACnB4C,SAAS,CAAC,SAAS,CACnBW,KAAK,CAAE,CAAEC,KAAK,CAAE,SAAU,CAAE,CAC7B,CAAC,CACI,CAAC,EACN,CAAC,cAEN/C,KAAA,QAAKmC,SAAS,CAAC,iFAAiF,CAAAC,QAAA,eAC9FpC,KAAA,QAAKmC,SAAS,CAAC,YAAY,CAAAC,QAAA,eACzBpC,KAAA,QAAKmC,SAAS,CAAC,QAAQ,CAAAC,QAAA,eACrBtC,IAAA,OAAAsC,QAAA,CAAKI,IAAI,CAACW,OAAO,CAAK,CAAC,cACvBrD,IAAA,QAAQ,CAAC,EACN,CAAC,cACNA,IAAA,QAAKqC,SAAS,CAAC,oBAAoB,CAAAC,QAAA,cACnCpC,KAAA,QAAKmC,SAAS,CAAC,gDAAgD,CAAAC,QAAA,eAC7DpC,KAAA,MAAGmC,SAAS,CAAC,wBAAwB,CAAAC,QAAA,EAClC,GAAG,CACHI,IAAI,CAACY,aAAa,EAClB,CAAC,cACJtD,IAAA,MAAGqC,SAAS,CAAC,wBAAwB,CAAAC,QAAA,CAClCI,IAAI,CAACa,aAAa,CAClB,CAAC,EACD,CAAC,CAED,CAAC,EACH,CAAC,CACLC,KAAK,CAACC,OAAO,CAACf,IAAI,CAACgB,GAAG,CAAC,EAAIhB,IAAI,CAACgB,GAAG,CAACC,MAAM,CAAG,CAAC,cAC7CzD,KAAA,QAAKmC,SAAS,CAAC,qCAAqC,CAAAC,QAAA,eAClDtC,IAAA,OAAAsC,QAAA,CAAI,cAAY,CAAI,CAAC,cAErBtC,IAAA,QAAKqC,SAAS,CAAC,sBAAsB,CAAAC,QAAA,CAClCI,IAAI,CAACgB,GAAG,CAACjB,GAAG,CAAC,SAACmB,MAAM,CAAEC,QAAQ,qBAC7B7D,IAAA,QAAKqC,SAAS,CAAC,WAAW,CAAgBa,GAAG,CAAEU,MAAO,CAACR,GAAG,UAAAU,MAAA,CAAWD,QAAQ,CAAG,EAAhDA,QAAkD,CAAC,EACpF,CAAC,CAGC,CAAC,EACH,CAAC,cAEN3D,KAAA,QAAKmC,SAAS,CAAC,qBAAqB,CAAAC,QAAA,eAClCtC,IAAA,OAAAsC,QAAA,CAAI,cAAY,CAAI,CAAC,cACrBtC,IAAA,MAAAsC,QAAA,CAAG,0BAAwB,CAAG,CAAC,EAC5B,CACN,EACE,CAAC,EACH,CAAC,cAENtC,IAAA,QAAKqC,SAAS,CAAC,kBAAkB,CAAM,CAAC,EACrC,CAAC,EA9EEM,KA+EL,CAAC,EACP,CAAC,EACI,CAAC,CAEN,CAAC,CAEV,CAAC,CAED,cAAe,CAAAxC,WAAW"},"metadata":{},"sourceType":"module","externalDependencies":[]}