{"version":3,"file":"LanguageFlipper.MILb-_HB.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/sKoXdMd4qOGs32oDH8Wv/dUgl0tMXOnz2FHfafRvy/LanguageFlipper.js"],"sourcesContent":["// Component that displays \"hello\" in multiple languages, rotating through them with a flip animation\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function LanguageFlipper(props){const{languages,duration,textColor,font}=props;const[currentIndex,setCurrentIndex]=useState(0);const[prevIndex,setPrevIndex]=useState(0);const measureRef=useRef(null);const[maxWidth,setMaxWidth]=useState(0);// Measure the width of all greetings to find the maximum\nuseEffect(()=>{if(measureRef.current){let max=0;languages.forEach(lang=>{const span=document.createElement(\"span\");span.style.visibility=\"hidden\";span.style.position=\"absolute\";span.style.whiteSpace=\"nowrap\";Object.assign(span.style,font);span.textContent=lang.greeting;document.body.appendChild(span);max=Math.max(max,span.offsetWidth);document.body.removeChild(span);});setMaxWidth(max+20);}},[languages,font]);useEffect(()=>{const interval=setInterval(()=>{setPrevIndex(currentIndex);setCurrentIndex(prev=>(prev+1)%languages.length);},duration*1e3);return()=>clearInterval(interval);},[duration,languages.length,currentIndex]);return /*#__PURE__*/_jsxs(\"div\",{style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\"},children:[/*#__PURE__*/_jsx(\"div\",{ref:measureRef,style:{position:\"relative\",display:\"inline-block\",minWidth:maxWidth>0?`${maxWidth}px`:\"auto\",overflow:\"hidden\",height:\"auto\"},children:/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:maxWidth>0?`${maxWidth}px`:\"auto\",color:textColor,whiteSpace:\"nowrap\",...font,animation:\"slideUpOut 0.6s ease-out forwards\"},children:languages[prevIndex].greeting},`old-${prevIndex}`),/*#__PURE__*/_jsx(\"div\",{style:{width:maxWidth>0?`${maxWidth}px`:\"auto\",color:textColor,whiteSpace:\"nowrap\",...font,animation:\"slideUpIn 0.6s ease-out forwards\"},children:languages[currentIndex].greeting},`new-${currentIndex}`)]})}),/*#__PURE__*/_jsx(\"style\",{children:`\n                    @keyframes slideUpOut {\n                        0% {\n                            transform: translateY(0);\n                            opacity: 1;\n                        }\n                        100% {\n                            transform: translateY(-100%);\n                            opacity: 0;\n                        }\n                    }\n                    \n                    @keyframes slideUpIn {\n                        0% {\n                            transform: translateY(100%);\n                            opacity: 0;\n                        }\n                        100% {\n                            transform: translateY(0);\n                            opacity: 1;\n                        }\n                    }\n                `})]});}addPropertyControls(LanguageFlipper,{languages:{type:ControlType.Array,title:\"Languages\",control:{type:ControlType.Object,controls:{language:{type:ControlType.String,title:\"Language\",defaultValue:\"English\"},greeting:{type:ControlType.String,title:\"Greeting\",defaultValue:\"Hello\"}}},defaultValue:[{language:\"English\",greeting:\"Hello\"},{language:\"Spanish\",greeting:\"Hola\"},{language:\"French\",greeting:\"Bonjour\"},{language:\"German\",greeting:\"Guten Tag\"},{language:\"Italian\",greeting:\"Ciao\"},{language:\"Japanese\",greeting:\"こんにちは\"},{language:\"Korean\",greeting:\"안녕하세요\"},{language:\"Chinese\",greeting:\"你好\"},{language:\"Arabic\",greeting:\"مرحبا\"},{language:\"Russian\",greeting:\"Привет\"}]},duration:{type:ControlType.Number,title:\"Duration\",defaultValue:2,min:.5,max:10,step:.5,unit:\"s\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"40px\",variant:\"Bold\",letterSpacing:\"-0.04em\",lineHeight:\"1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LanguageFlipper\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LanguageFlipper.map"],"mappings":"+LAIG,SAAwB,EAAgB,EAAM,CAAC,GAAK,CAAC,YAAU,WAAS,YAAU,QAAM,EAAW,CAAC,EAAa,GAAiBA,EAAS,EAAE,CAAM,CAAC,EAAU,GAAcA,EAAS,EAAE,CAAO,EAAWC,EAAO,KAAK,CAAM,CAAC,EAAS,GAAaD,EAAS,EAAE,CACsX,OAAtnB,MAAc,CAAC,GAAG,EAAW,QAAQ,CAAC,IAAI,EAAI,EAAE,EAAU,QAAQ,GAAM,CAAC,IAAM,EAAK,SAAS,cAAc,OAAO,CAAC,EAAK,MAAM,WAAW,SAAS,EAAK,MAAM,SAAS,WAAW,EAAK,MAAM,WAAW,SAAS,OAAO,OAAO,EAAK,MAAM,EAAK,CAAC,EAAK,YAAY,EAAK,SAAS,SAAS,KAAK,YAAY,EAAK,CAAC,EAAI,KAAK,IAAI,EAAI,EAAK,YAAY,CAAC,SAAS,KAAK,YAAY,EAAK,EAAG,CAAC,EAAY,EAAI,GAAG,GAAI,CAAC,EAAU,EAAK,CAAC,CAAC,MAAc,CAAC,IAAM,EAAS,gBAAgB,CAAC,EAAa,EAAa,CAAC,EAAgB,IAAO,EAAK,GAAG,EAAU,OAAO,EAAG,EAAS,IAAI,CAAC,UAAU,cAAc,EAAS,EAAG,CAAC,EAAS,EAAU,OAAO,EAAa,CAAC,CAAqB,EAAM,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,IAAI,EAAW,MAAM,CAAC,SAAS,WAAW,QAAQ,eAAe,SAAS,EAAS,EAAE,GAAG,EAAS,IAAI,OAAO,SAAS,SAAS,OAAO,OAAO,CAAC,SAAsB,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,EAAS,EAAE,GAAG,EAAS,IAAI,OAAO,MAAM,EAAU,WAAW,SAAS,GAAG,EAAK,UAAU,oCAAoC,CAAC,SAAS,EAAU,GAAW,SAAS,CAAC,OAAO,IAAY,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,EAAS,EAAE,GAAG,EAAS,IAAI,OAAO,MAAM,EAAU,WAAW,SAAS,GAAG,EAAK,UAAU,mCAAmC,CAAC,SAAS,EAAU,GAAc,SAAS,CAAC,OAAO,IAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAc,EAAK,QAAQ,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;kBAsBz+C,CAAC,CAAC,CAAC,CAAC,kBA1BmC,IAA6C,IAAoD,CA0BlI,EAAoB,EAAgB,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,YAAY,QAAQ,CAAC,KAAK,EAAY,OAAO,SAAS,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,UAAU,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,SAAS,UAAU,SAAS,QAAQ,CAAC,CAAC,SAAS,UAAU,SAAS,OAAO,CAAC,CAAC,SAAS,SAAS,SAAS,UAAU,CAAC,CAAC,SAAS,SAAS,SAAS,YAAY,CAAC,CAAC,SAAS,UAAU,SAAS,OAAO,CAAC,CAAC,SAAS,WAAW,SAAS,QAAQ,CAAC,CAAC,SAAS,SAAS,SAAS,QAAQ,CAAC,CAAC,SAAS,UAAU,SAAS,KAAK,CAAC,CAAC,SAAS,SAAS,SAAS,QAAQ,CAAC,CAAC,SAAS,UAAU,SAAS,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,aAAa,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,SAAS,WAAW,gBAAgB,aAAa,aAAa,CAAC,SAAS,OAAO,QAAQ,OAAO,cAAc,UAAU,WAAW,MAAM,CAAC,CAAC,CAAC"}