{"ast":null,"code":"import _slicedToArray from\"C:/Users/user/Desktop/00monsite/front/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";import React,{useEffect,useState}from\"react\";import Navbar from\"../components/Navbar\";import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var Technology=function Technology(){var _useState=useState({}),_useState2=_slicedToArray(_useState,2),currentTekno=_useState2[0],setCurrentTekno=_useState2[1];var _useState3=useState([]),_useState4=_slicedToArray(_useState3,2),tekno=_useState4[0],setTekno=_useState4[1];var _useState5=useState(0),_useState6=_slicedToArray(_useState5,2),selectedTeknoIndex=_useState6[0],setSelectedTeknoIndex=_useState6[1];useEffect(function(){fetch('data.json').then(function(response){return response.json();}).then(function(data){setTekno(data.technology);setCurrentTekno(data.technology[0]);});},[]);var handleTeknoChange=function handleTeknoChange(teknoIndex){setCurrentTekno(tekno[teknoIndex]);setSelectedTeknoIndex(teknoIndex);};return/*#__PURE__*/_jsxs(\"div\",{className:\"bg-tekno\",children:[/*#__PURE__*/_jsx(Navbar,{}),/*#__PURE__*/_jsx(\"div\",{children:/*#__PURE__*/_jsxs(\"h4\",{children:[/*#__PURE__*/_jsx(\"span\",{className:\"number\",children:\" 03 \"}),\"SPACE LOACH 101\"]})}),/*#__PURE__*/_jsxs(\"div\",{className:\"container containerTekno \",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"containerAll d-flex justify-content-center align-items-center\",children:[/*#__PURE__*/_jsx(\"div\",{className:\"menu d-flex flex-column justify-content-center align-items-center\",children:tekno.map(function(t,index){return/*#__PURE__*/_jsx(\"div\",{className:\"butonCircle \".concat(selectedTeknoIndex===index?'selectedTekno':''),onClick:function onClick(){return handleTeknoChange(index);},children:index+1},index);})}),/*#__PURE__*/_jsxs(\"div\",{className:\"teknoText\",children:[/*#__PURE__*/_jsx(\"h5\",{className:\"number\",children:\" the technology...\"}),/*#__PURE__*/_jsx(\"h3\",{children:currentTekno.name}),/*#__PURE__*/_jsx(\"p\",{children:currentTekno.description})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"containerAll d-flex justify-content-center align-items-center\",children:currentTekno.images&&/*#__PURE__*/_jsx(\"img\",{src:currentTekno.images.portrait,alt:currentTekno.name})})]})]});};export default Technology;","map":{"version":3,"names":["React","useEffect","useState","Navbar","Technology","currentTekno","setCurrentTekno","tekno","setTekno","selectedTeknoIndex","setSelectedTeknoIndex","fetch","then","response","json","data","technology","handleTeknoChange","teknoIndex","map","t","index","name","description","images","portrait"],"sources":["C:/Users/user/Desktop/00monsite/front/src/page/technology.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport Navbar from \"../components/Navbar\";\r\n\r\nconst Technology = () => {\r\n    const [currentTekno, setCurrentTekno] = useState({});\r\n    const [tekno, setTekno] = useState([]);\r\n    const [selectedTeknoIndex,setSelectedTeknoIndex]=useState(0);\r\n  \r\n    useEffect(() => {\r\n      fetch('data.json')\r\n        .then(response => response.json())\r\n        .then(data => {\r\n          setTekno(data.technology);\r\n          setCurrentTekno(data.technology[0]);\r\n        });\r\n    }, []);\r\n  \r\n    const handleTeknoChange = (teknoIndex) => {\r\n      setCurrentTekno(tekno[teknoIndex]);\r\n      setSelectedTeknoIndex(teknoIndex);\r\n    }\r\n  \r\n    return (\r\n      <div className=\"bg-tekno\">\r\n        <Navbar />\r\n        <div>\r\n          <h4><span className=\"number\"> 03 </span>SPACE LOACH 101</h4>\r\n        </div>\r\n        <div className=\"container containerTekno \">\r\n          <div className=\"containerAll d-flex justify-content-center align-items-center\">\r\n            <div className=\"menu d-flex flex-column justify-content-center align-items-center\">\r\n              {tekno.map((t, index) => (\r\n                <div key={index} className={ `butonCircle ${selectedTeknoIndex===index ? 'selectedTekno':''}`} onClick={() => handleTeknoChange(index)}>\r\n                  {index + 1}\r\n                </div>\r\n              ))}\r\n            </div>\r\n            <div className=\"teknoText\">\r\n              <h5 className=\"number\"> the technology...</h5>\r\n              <h3>{currentTekno.name}</h3>\r\n              <p>{currentTekno.description}</p>\r\n            </div>\r\n          </div>\r\n          <div className=\"containerAll d-flex justify-content-center align-items-center\" >\r\n            {/* <img src={currentTekno.images.portrait} alt={currentTekno.name} /> */}\r\n            {currentTekno.images && <img src={currentTekno.images.portrait} alt={currentTekno.name} />}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n  \r\n  export default Technology;"],"mappings":"2HAAA,MAAOA,MAAK,EAAIC,SAAS,CAAEC,QAAQ,KAAQ,OAAO,CAClD,MAAOC,OAAM,KAAM,sBAAsB,CAAC,wFAE1C,GAAMC,WAAU,CAAG,QAAbA,WAAU,EAAS,CACrB,cAAwCF,QAAQ,CAAC,CAAC,CAAC,CAAC,wCAA7CG,YAAY,eAAEC,eAAe,eACpC,eAA0BJ,QAAQ,CAAC,EAAE,CAAC,yCAA/BK,KAAK,eAAEC,QAAQ,eACtB,eAAiDN,QAAQ,CAAC,CAAC,CAAC,yCAArDO,kBAAkB,eAACC,qBAAqB,eAE/CT,SAAS,CAAC,UAAM,CACdU,KAAK,CAAC,WAAW,CAAC,CACfC,IAAI,CAAC,SAAAC,QAAQ,QAAIA,SAAQ,CAACC,IAAI,EAAE,GAAC,CACjCF,IAAI,CAAC,SAAAG,IAAI,CAAI,CACZP,QAAQ,CAACO,IAAI,CAACC,UAAU,CAAC,CACzBV,eAAe,CAACS,IAAI,CAACC,UAAU,CAAC,CAAC,CAAC,CAAC,CACrC,CAAC,CAAC,CACN,CAAC,CAAE,EAAE,CAAC,CAEN,GAAMC,kBAAiB,CAAG,QAApBA,kBAAiB,CAAIC,UAAU,CAAK,CACxCZ,eAAe,CAACC,KAAK,CAACW,UAAU,CAAC,CAAC,CAClCR,qBAAqB,CAACQ,UAAU,CAAC,CACnC,CAAC,CAED,mBACE,aAAK,SAAS,CAAC,UAAU,wBACvB,KAAC,MAAM,IAAG,cACV,kCACE,mCAAI,aAAM,SAAS,CAAC,QAAQ,UAAC,MAAI,EAAO,kBAAe,GAAK,EACxD,cACN,aAAK,SAAS,CAAC,2BAA2B,wBACxC,aAAK,SAAS,CAAC,+DAA+D,wBAC5E,YAAK,SAAS,CAAC,mEAAmE,UAC/EX,KAAK,CAACY,GAAG,CAAC,SAACC,CAAC,CAAEC,KAAK,qBAClB,YAAiB,SAAS,uBAAkBZ,kBAAkB,GAAGY,KAAK,CAAG,eAAe,CAAC,EAAE,CAAG,CAAC,OAAO,CAAE,yBAAMJ,kBAAiB,CAACI,KAAK,CAAC,EAAC,UACpIA,KAAK,CAAG,CAAC,EADFA,KAAK,CAET,EACP,CAAC,EACE,cACN,aAAK,SAAS,CAAC,WAAW,wBACxB,WAAI,SAAS,CAAC,QAAQ,UAAC,oBAAkB,EAAK,cAC9C,oBAAKhB,YAAY,CAACiB,IAAI,EAAM,cAC5B,mBAAIjB,YAAY,CAACkB,WAAW,EAAK,GAC7B,GACF,cACN,YAAK,SAAS,CAAC,+DAA+D,UAE3ElB,YAAY,CAACmB,MAAM,eAAI,YAAK,GAAG,CAAEnB,YAAY,CAACmB,MAAM,CAACC,QAAS,CAAC,GAAG,CAAEpB,YAAY,CAACiB,IAAK,EAAG,EACtF,GACF,GACF,CAEV,CAAC,CAED,cAAelB,WAAU"},"metadata":{},"sourceType":"module","externalDependencies":[]}