{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\user\\\\Desktop\\\\000newport\\\\src\\\\components\\\\pages\\\\home\\\\components\\\\04portefolio\\\\presentation\\\\realisation.js\",\n  _s = $RefreshSig$();\nimport React, { useEffect, useState } from \"react\";\nimport UseFetch from \"../../../../../hooks/useFetch\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faAngleRight } from \"@fortawesome/free-solid-svg-icons\";\nimport Slider from \"react-slick\";\nimport { useRef } from \"react\";\nimport ScrollMagic from \"scrollmagic\";\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Realisation = () => {\n  _s();\n  const {\n    data,\n    error\n  } = UseFetch(\"/realisation.json\");\n  const [currentItem, setCurrentItem] = useState(0);\n  if (error) {\n    console.log(\"Error fetch data\");\n  }\n  const settings = {\n    dots: false,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    arrows: false,\n    fade: true\n  };\n  const sliderRef = useRef();\n  const handleNext = () => {\n    sliderRef.current.slickNext();\n  };\n  const handlePrev = () => {\n    sliderRef.current.slickPrev();\n  };\n  gsap.registerPlugin(ScrollTrigger);\n  gsap.to(\".triggerss\", {\n    x: 500,\n    scrollTrigger: {\n      duration: 0.5,\n      trigger: \".triggerss\",\n      // L'élément qui déclenchera l'animation\n      end: \"center center\",\n      start: \"top 10%\",\n      markers: true\n    }\n  });\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    children: /*#__PURE__*/_jsxDEV(Slider, {\n      ...settings,\n      ref: sliderRef,\n      children: data.map((item, index) => /*#__PURE__*/_jsxDEV(\"div\", {\n        children: /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"carousel-container   \",\n          children: [/*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"carousel-item  lg:space-x-2 justify-center w-full max-lg:flex-col max-lg:space-y-2 \",\n            children: [/*#__PURE__*/_jsxDEV(\"div\", {\n              className: \"imgPortfolio xl:w-2/3 2xl:h-full ti   max-lg:w-full  flex relative rounded-2xl \",\n              children: [/*#__PURE__*/_jsxDEV(\"button\", {\n                id: \"preview\",\n                className: \"absolute backdrop-blur-xl\",\n                onClick: handlePrev,\n                disabled: currentItem === 0,\n                children: /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                  className: \"nextPre\",\n                  icon: faAngleRight,\n                  rotation: 180,\n                  style: {\n                    color: \"#ec69c3\"\n                  }\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 61,\n                  columnNumber: 21\n                }, this)\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 55,\n                columnNumber: 19\n              }, this), /*#__PURE__*/_jsxDEV(\"img\", {\n                src: item.imageSrc,\n                alt: item.titre01,\n                className: \"carouselImg w-full \"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 69,\n                columnNumber: 19\n              }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n                id: \"next\",\n                className: \"absolute backdrop-blur-xl\",\n                onClick: handleNext,\n                children: /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                  icon: faAngleRight,\n                  className: \"nextPre\",\n                  style: {\n                    color: \"#ec69c3\"\n                  }\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 80,\n                  columnNumber: 21\n                }, this)\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 75,\n                columnNumber: 19\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 54,\n              columnNumber: 17\n            }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n              className: \"bg-neutral-400 responsiTitreDescrip xl:w-1/3 p-2 lg:w-3/6  max-lg:w-full 2xl:flex \",\n              children: [/*#__PURE__*/_jsxDEV(\"div\", {\n                className: \" 2xl:w-2/3 2xl:border-r\",\n                children: [/*#__PURE__*/_jsxDEV(\"div\", {\n                  children: [/*#__PURE__*/_jsxDEV(\"h4\", {\n                    children: item.titre01\n                  }, void 0, false, {\n                    fileName: _jsxFileName,\n                    lineNumber: 91,\n                    columnNumber: 23\n                  }, this), /*#__PURE__*/_jsxDEV(\"h5\", {}, void 0, false, {\n                    fileName: _jsxFileName,\n                    lineNumber: 92,\n                    columnNumber: 23\n                  }, this)]\n                }, void 0, true, {\n                  fileName: _jsxFileName,\n                  lineNumber: 90,\n                  columnNumber: 21\n                }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n                  children: [/*#__PURE__*/_jsxDEV(\"p\", {\n                    className: \"text-justify mt-1 px-1\",\n                    children: [\" \", data.description01]\n                  }, void 0, true, {\n                    fileName: _jsxFileName,\n                    lineNumber: 95,\n                    columnNumber: 23\n                  }, this), /*#__PURE__*/_jsxDEV(\"p\", {\n                    className: \"text-justify mt-1 px-1\",\n                    children: data.description02\n                  }, void 0, false, {\n                    fileName: _jsxFileName,\n                    lineNumber: 99,\n                    columnNumber: 23\n                  }, this)]\n                }, void 0, true, {\n                  fileName: _jsxFileName,\n                  lineNumber: 94,\n                  columnNumber: 21\n                }, this)]\n              }, void 0, true, {\n                fileName: _jsxFileName,\n                lineNumber: 89,\n                columnNumber: 19\n              }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n                className: \"logoHome  2xl:w-1/3 border\",\n                children: [/*#__PURE__*/_jsxDEV(\"h3\", {\n                  children: \"technologies\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 105,\n                  columnNumber: 21\n                }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n                  className: \"w-20\",\n                  children: /*#__PURE__*/_jsxDEV(\"img\", {\n                    src: \"/images/logo/React.png\",\n                    alt: \"/images/logo/React.png\"\n                  }, void 0, false, {\n                    fileName: _jsxFileName,\n                    lineNumber: 107,\n                    columnNumber: 23\n                  }, this)\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 106,\n                  columnNumber: 21\n                }, this)]\n              }, void 0, true, {\n                fileName: _jsxFileName,\n                lineNumber: 104,\n                columnNumber: 19\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 88,\n              columnNumber: 17\n            }, this)]\n          }, void 0, true, {\n            fileName: _jsxFileName,\n            lineNumber: 53,\n            columnNumber: 15\n          }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"carousel-buttons\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 115,\n            columnNumber: 15\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 52,\n          columnNumber: 13\n        }, this)\n      }, index, false, {\n        fileName: _jsxFileName,\n        lineNumber: 51,\n        columnNumber: 11\n      }, this))\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 49,\n      columnNumber: 7\n    }, this)\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 48,\n    columnNumber: 5\n  }, this);\n};\n_s(Realisation, \"q/xDEQTxfy1OwQ1eJrfDl8cq/u8=\");\n_c = Realisation;\nexport default Realisation;\nvar _c;\n$RefreshReg$(_c, \"Realisation\");","map":{"version":3,"names":["React","useEffect","useState","UseFetch","FontAwesomeIcon","faAngleRight","Slider","useRef","ScrollMagic","gsap","ScrollTrigger","jsxDEV","_jsxDEV","Realisation","_s","data","error","currentItem","setCurrentItem","console","log","settings","dots","infinite","speed","slidesToShow","arrows","fade","sliderRef","handleNext","current","slickNext","handlePrev","slickPrev","registerPlugin","to","x","scrollTrigger","duration","trigger","end","start","markers","children","ref","map","item","index","className","id","onClick","disabled","icon","rotation","style","color","fileName","_jsxFileName","lineNumber","columnNumber","src","imageSrc","alt","titre01","description01","description02","_c","$RefreshReg$"],"sources":["C:/Users/user/Desktop/000newport/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  gsap.registerPlugin(ScrollTrigger);\r\n  gsap.to(\".triggerss\", {\r\n    x: 500,\r\n    scrollTrigger: {\r\n      duration: 0.5,\r\n      trigger: \".triggerss\", // L'élément qui déclenchera l'animation\r\n      end: \"center center\",\r\n      start: \"top 10%\",\r\n      markers: true,\r\n    },\r\n  });\r\n\r\n  return (\r\n    <div>\r\n      <Slider {...settings} ref={sliderRef}>\r\n        {data.map((item, index) => (\r\n          <div key={index}>\r\n            <div className=\"carousel-container   \">\r\n              <div className=\"carousel-item  lg:space-x-2 justify-center w-full max-lg:flex-col max-lg:space-y-2 \">\r\n                <div className=\"imgPortfolio xl:w-2/3 2xl:h-full ti   max-lg:w-full  flex relative rounded-2xl \">\r\n                  <button\r\n                    id=\"preview\"\r\n                    className=\"absolute backdrop-blur-xl\"\r\n                    onClick={handlePrev}\r\n                    disabled={currentItem === 0}\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=\"bg-neutral-400 responsiTitreDescrip xl:w-1/3 p-2 lg:w-3/6  max-lg:w-full 2xl:flex \">\r\n                  <div className=\" 2xl:w-2/3 2xl:border-r\">\r\n                    <div>\r\n                      <h4>{item.titre01}</h4>\r\n                      <h5></h5>\r\n                    </div>\r\n                    <div>\r\n                      <p className=\"text-justify mt-1 px-1\">\r\n                        {\" \"}\r\n                        {data.description01}\r\n                      </p>\r\n                      <p className=\"text-justify mt-1 px-1\">\r\n                        {data.description02}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n                  <div className=\"logoHome  2xl:w-1/3 border\">\r\n                    <h3>technologies</h3>\r\n                    <div className=\"w-20\">\r\n                      <img\r\n                        src=\"/images/logo/React.png\"\r\n                        alt=\"/images/logo/React.png\"\r\n                      />\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\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":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,OAAOC,QAAQ,MAAM,+BAA+B;AACpD,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,YAAY,QAAQ,mCAAmC;AAChE,OAAOC,MAAM,MAAM,aAAa;AAChC,SAASC,MAAM,QAAQ,OAAO;AAC9B,OAAOC,WAAW,MAAM,aAAa;AACrC,SAASC,IAAI,QAAQ,MAAM;AAC3B,SAASC,aAAa,QAAQ,oBAAoB;AAAC,SAAAC,MAAA,IAAAC,OAAA;AAEnD,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAAAC,EAAA;EACxB,MAAM;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGb,QAAQ,CAAC,mBAAmB,CAAC;EACrD,MAAM,CAACc,WAAW,EAAEC,cAAc,CAAC,GAAGhB,QAAQ,CAAC,CAAC,CAAC;EAEjD,IAAIc,KAAK,EAAE;IACTG,OAAO,CAACC,GAAG,CAAC,kBAAkB,CAAC;EACjC;EACA,MAAMC,QAAQ,GAAG;IACfC,IAAI,EAAE,KAAK;IACXC,QAAQ,EAAE,IAAI;IACdC,KAAK,EAAE,GAAG;IACVC,YAAY,EAAE,CAAC;IACfC,MAAM,EAAE,KAAK;IACbC,IAAI,EAAE;EACR,CAAC;EACD,MAAMC,SAAS,GAAGrB,MAAM,CAAC,CAAC;EAE1B,MAAMsB,UAAU,GAAGA,CAAA,KAAM;IACvBD,SAAS,CAACE,OAAO,CAACC,SAAS,CAAC,CAAC;EAC/B,CAAC;EAED,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACvBJ,SAAS,CAACE,OAAO,CAACG,SAAS,CAAC,CAAC;EAC/B,CAAC;EACDxB,IAAI,CAACyB,cAAc,CAACxB,aAAa,CAAC;EAClCD,IAAI,CAAC0B,EAAE,CAAC,YAAY,EAAE;IACpBC,CAAC,EAAE,GAAG;IACNC,aAAa,EAAE;MACbC,QAAQ,EAAE,GAAG;MACbC,OAAO,EAAE,YAAY;MAAE;MACvBC,GAAG,EAAE,eAAe;MACpBC,KAAK,EAAE,SAAS;MAChBC,OAAO,EAAE;IACX;EACF,CAAC,CAAC;EAEF,oBACE9B,OAAA;IAAA+B,QAAA,eACE/B,OAAA,CAACN,MAAM;MAAA,GAAKe,QAAQ;MAAEuB,GAAG,EAAEhB,SAAU;MAAAe,QAAA,EAClC5B,IAAI,CAAC8B,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACpBnC,OAAA;QAAA+B,QAAA,eACE/B,OAAA;UAAKoC,SAAS,EAAC,uBAAuB;UAAAL,QAAA,gBACpC/B,OAAA;YAAKoC,SAAS,EAAC,qFAAqF;YAAAL,QAAA,gBAClG/B,OAAA;cAAKoC,SAAS,EAAC,iFAAiF;cAAAL,QAAA,gBAC9F/B,OAAA;gBACEqC,EAAE,EAAC,SAAS;gBACZD,SAAS,EAAC,2BAA2B;gBACrCE,OAAO,EAAElB,UAAW;gBACpBmB,QAAQ,EAAElC,WAAW,KAAK,CAAE;gBAAA0B,QAAA,eAE5B/B,OAAA,CAACR,eAAe;kBACd4C,SAAS,EAAC,SAAS;kBACnBI,IAAI,EAAE/C,YAAa;kBACnBgD,QAAQ,EAAE,GAAI;kBACdC,KAAK,EAAE;oBAAEC,KAAK,EAAE;kBAAU;gBAAE;kBAAAC,QAAA,EAAAC,YAAA;kBAAAC,UAAA;kBAAAC,YAAA;gBAAA,OAC7B;cAAC;gBAAAH,QAAA,EAAAC,YAAA;gBAAAC,UAAA;gBAAAC,YAAA;cAAA,OACI,CAAC,eAET/C,OAAA;gBACEgD,GAAG,EAAEd,IAAI,CAACe,QAAS;gBACnBC,GAAG,EAAEhB,IAAI,CAACiB,OAAQ;gBAClBf,SAAS,EAAC;cAAqB;gBAAAQ,QAAA,EAAAC,YAAA;gBAAAC,UAAA;gBAAAC,YAAA;cAAA,OAChC,CAAC,eAEF/C,OAAA;gBACEqC,EAAE,EAAC,MAAM;gBACTD,SAAS,EAAC,2BAA2B;gBACrCE,OAAO,EAAErB,UAAW;gBAAAc,QAAA,eAEpB/B,OAAA,CAACR,eAAe;kBACdgD,IAAI,EAAE/C,YAAa;kBACnB2C,SAAS,EAAC,SAAS;kBACnBM,KAAK,EAAE;oBAAEC,KAAK,EAAE;kBAAU;gBAAE;kBAAAC,QAAA,EAAAC,YAAA;kBAAAC,UAAA;kBAAAC,YAAA;gBAAA,OAC7B;cAAC;gBAAAH,QAAA,EAAAC,YAAA;gBAAAC,UAAA;gBAAAC,YAAA;cAAA,OACI,CAAC;YAAA;cAAAH,QAAA,EAAAC,YAAA;cAAAC,UAAA;cAAAC,YAAA;YAAA,OACN,CAAC,eAEN/C,OAAA;cAAKoC,SAAS,EAAC,oFAAoF;cAAAL,QAAA,gBACjG/B,OAAA;gBAAKoC,SAAS,EAAC,yBAAyB;gBAAAL,QAAA,gBACtC/B,OAAA;kBAAA+B,QAAA,gBACE/B,OAAA;oBAAA+B,QAAA,EAAKG,IAAI,CAACiB;kBAAO;oBAAAP,QAAA,EAAAC,YAAA;oBAAAC,UAAA;oBAAAC,YAAA;kBAAA,OAAK,CAAC,eACvB/C,OAAA;oBAAA4C,QAAA,EAAAC,YAAA;oBAAAC,UAAA;oBAAAC,YAAA;kBAAA,OAAQ,CAAC;gBAAA;kBAAAH,QAAA,EAAAC,YAAA;kBAAAC,UAAA;kBAAAC,YAAA;gBAAA,OACN,CAAC,eACN/C,OAAA;kBAAA+B,QAAA,gBACE/B,OAAA;oBAAGoC,SAAS,EAAC,wBAAwB;oBAAAL,QAAA,GAClC,GAAG,EACH5B,IAAI,CAACiD,aAAa;kBAAA;oBAAAR,QAAA,EAAAC,YAAA;oBAAAC,UAAA;oBAAAC,YAAA;kBAAA,OAClB,CAAC,eACJ/C,OAAA;oBAAGoC,SAAS,EAAC,wBAAwB;oBAAAL,QAAA,EAClC5B,IAAI,CAACkD;kBAAa;oBAAAT,QAAA,EAAAC,YAAA;oBAAAC,UAAA;oBAAAC,YAAA;kBAAA,OAClB,CAAC;gBAAA;kBAAAH,QAAA,EAAAC,YAAA;kBAAAC,UAAA;kBAAAC,YAAA;gBAAA,OACD,CAAC;cAAA;gBAAAH,QAAA,EAAAC,YAAA;gBAAAC,UAAA;gBAAAC,YAAA;cAAA,OACH,CAAC,eACN/C,OAAA;gBAAKoC,SAAS,EAAC,4BAA4B;gBAAAL,QAAA,gBACzC/B,OAAA;kBAAA+B,QAAA,EAAI;gBAAY;kBAAAa,QAAA,EAAAC,YAAA;kBAAAC,UAAA;kBAAAC,YAAA;gBAAA,OAAI,CAAC,eACrB/C,OAAA;kBAAKoC,SAAS,EAAC,MAAM;kBAAAL,QAAA,eACnB/B,OAAA;oBACEgD,GAAG,EAAC,wBAAwB;oBAC5BE,GAAG,EAAC;kBAAwB;oBAAAN,QAAA,EAAAC,YAAA;oBAAAC,UAAA;oBAAAC,YAAA;kBAAA,OAC7B;gBAAC;kBAAAH,QAAA,EAAAC,YAAA;kBAAAC,UAAA;kBAAAC,YAAA;gBAAA,OACC,CAAC;cAAA;gBAAAH,QAAA,EAAAC,YAAA;gBAAAC,UAAA;gBAAAC,YAAA;cAAA,OACH,CAAC;YAAA;cAAAH,QAAA,EAAAC,YAAA;cAAAC,UAAA;cAAAC,YAAA;YAAA,OACH,CAAC;UAAA;YAAAH,QAAA,EAAAC,YAAA;YAAAC,UAAA;YAAAC,YAAA;UAAA,OACH,CAAC,eACN/C,OAAA;YAAKoC,SAAS,EAAC;UAAkB;YAAAQ,QAAA,EAAAC,YAAA;YAAAC,UAAA;YAAAC,YAAA;UAAA,OAAM,CAAC;QAAA;UAAAH,QAAA,EAAAC,YAAA;UAAAC,UAAA;UAAAC,YAAA;QAAA,OACrC;MAAC,GAjEEZ,KAAK;QAAAS,QAAA,EAAAC,YAAA;QAAAC,UAAA;QAAAC,YAAA;MAAA,OAkEV,CACN;IAAC;MAAAH,QAAA,EAAAC,YAAA;MAAAC,UAAA;MAAAC,YAAA;IAAA,OACI;EAAC;IAAAH,QAAA,EAAAC,YAAA;IAAAC,UAAA;IAAAC,YAAA;EAAA,OAEN,CAAC;AAEV,CAAC;AAAC7C,EAAA,CAhHID,WAAW;AAAAqD,EAAA,GAAXrD,WAAW;AAkHjB,eAAeA,WAAW;AAAC,IAAAqD,EAAA;AAAAC,YAAA,CAAAD,EAAA"},"metadata":{},"sourceType":"module","externalDependencies":[]}