{"version":3,"file":"UserJoinDisplay_1.DPZXOJdA.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/StDxjO6pJyeGJahx3PEY/DUv8umsoIiCxB2uwlclO/UserJoinDisplay_1.js"],"sourcesContent":["// Erstelle einen Component der eine Reihe von überlappenden Avataren und eine Badge mit \"People joined today\" anzeigt\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useRef,useEffect,useState,startTransition}from\"react\";import{motion}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function UserJoinDisplay(props){const{avatars,count,badgeText,backgroundColor,textColor,countBackgroundColor,countTextColor,countBorderColor,countBorderWidth,labelBorderColor,labelBorderWidth,counterBubbleSize,font,countFont,labelFontSize,counterFontSize,labelBorderRadiusTopLeft,labelBorderRadiusTopRight,labelBorderRadiusBottomRight,labelBorderRadiusBottomLeft,scale}=props;const labelRef=useRef(null);const[bubbleSize,setBubbleSize]=useState(80);const[currentIndices,setCurrentIndices]=useState([0,1,2,3,4,5]);const[animationState,setAnimationState]=useState(\"idle\");const nextIndexRef=useRef(6);const[displayedCount,setDisplayedCount]=useState(count);useEffect(()=>{if(labelRef.current){const height=labelRef.current.offsetHeight;startTransition(()=>setBubbleSize(height));}},[badgeText,labelFontSize,font]);useEffect(()=>{if(avatars.length<=5)return;const timer=setInterval(()=>{startTransition(()=>{setAnimationState(\"sliding\");});setTimeout(()=>{startTransition(()=>{setCurrentIndices(prev=>{const newIndices=[nextIndexRef.current,...prev.slice(0,5)];nextIndexRef.current=nextIndexRef.current+1;return newIndices;});setAnimationState(\"idle\");setDisplayedCount(prev=>prev+1);});},800);},3e3);return()=>clearInterval(timer);},[avatars.length]);const displayAvatars=()=>{if(animationState===\"sliding\"){// During animation: show incoming + 6 current (7 total)\nreturn[{index:nextIndexRef.current,isIncoming:true,isOutgoing:false},...currentIndices.map((idx,i)=>({index:idx,isIncoming:false,isOutgoing:i===5}))];}else{// Idle: show only 6 current\nreturn currentIndices.map(idx=>({index:idx,isIncoming:false,isOutgoing:false}));}};const avatarsToRender=displayAvatars();return /*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",gap:0,width:\"max-content\",overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",alignItems:\"center\",position:\"relative\",marginRight:0,width:(6*64-5*20)*scale,height:64*scale,overflow:\"visible\"},children:avatarsToRender.map((avatar,renderIndex)=>{const avatarData=avatars[avatar.index%avatars.length];const isOutgoing=avatar.isOutgoing;const isIncoming=avatar.isIncoming;// Calculate position based on state\nlet basePosition=renderIndex===0?0:renderIndex*64*scale-renderIndex*20*scale;return /*#__PURE__*/_jsx(motion.div,{initial:isIncoming?{x:-150*scale,opacity:1,scale:1}:{x:basePosition,opacity:1,scale:1},animate:isOutgoing?{x:basePosition+105*scale,opacity:0,scale:1}:isIncoming?{x:0,opacity:1,scale:1}:animationState===\"sliding\"?{x:basePosition+10*scale,opacity:1,scale:.95}:{x:basePosition,opacity:1,scale:1},transition:{duration:.8,ease:[.25,.1,.25,1]},style:{width:64*scale,height:64*scale,borderRadius:\"50%\",overflow:\"hidden\",border:`${3*scale}px solid white`,position:\"absolute\",left:0,zIndex:renderIndex},children:/*#__PURE__*/_jsx(\"img\",{src:avatarData.image.src,alt:avatarData.image.alt,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\"}})},`${avatar.index}-${isIncoming?\"in\":isOutgoing?\"out\":\"static\"}`);})}),/*#__PURE__*/_jsx(\"div\",{style:{backgroundColor:countBackgroundColor,color:countTextColor,borderRadius:\"50%\",width:counterBubbleSize*scale,height:counterBubbleSize*scale,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",boxShadow:\"0 2px 8px rgba(0, 0, 0, 0.08)\",border:`${countBorderWidth*scale}px solid ${countBorderColor}`,marginRight:-20*scale,marginLeft:32*scale,zIndex:100,...countFont,fontSize:counterFontSize*scale},children:displayedCount}),/*#__PURE__*/_jsx(\"div\",{ref:labelRef,style:{backgroundColor:backgroundColor,borderRadius:`${labelBorderRadiusTopLeft*scale}px ${labelBorderRadiusTopRight*scale}px ${labelBorderRadiusBottomRight*scale}px ${labelBorderRadiusBottomLeft*scale}px`,padding:`${16*scale}px ${32*scale}px`,boxShadow:\"0 2px 8px rgba(0, 0, 0, 0.08)\",border:`${labelBorderWidth*scale}px solid ${labelBorderColor}`},children:/*#__PURE__*/_jsx(\"span\",{style:{color:textColor,whiteSpace:\"nowrap\",...font,fontSize:labelFontSize*scale},children:badgeText})})]});}addPropertyControls(UserJoinDisplay,{scale:{type:ControlType.Number,title:\"Scale\",defaultValue:1,min:.1,max:3,step:.1,displayStepper:false},avatars:{type:ControlType.Array,title:\"Avatars\",control:{type:ControlType.Object,controls:{image:{type:ControlType.ResponsiveImage,title:\"Image\"}}},defaultValue:[{image:{src:\"https://i.pravatar.cc/150?img=1\",alt:\"Avatar 1\"}},{image:{src:\"https://i.pravatar.cc/150?img=2\",alt:\"Avatar 2\"}},{image:{src:\"https://i.pravatar.cc/150?img=3\",alt:\"Avatar 3\"}},{image:{src:\"https://i.pravatar.cc/150?img=4\",alt:\"Avatar 4\"}},{image:{src:\"https://i.pravatar.cc/150?img=5\",alt:\"Avatar 5\"}}]},count:{type:ControlType.Number,title:\"Count\",defaultValue:182,min:0,step:1},badgeText:{type:ControlType.String,title:\"Badge Text\",defaultValue:\"People joined today\"},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#F5F5F5\"},textColor:{type:ControlType.Color,title:\"Text Color\",defaultValue:\"#000000\"},countBackgroundColor:{type:ControlType.Color,title:\"Count Background\",defaultValue:\"#000000\"},countTextColor:{type:ControlType.Color,title:\"Count Text\",defaultValue:\"#FFFFFF\"},countBorderColor:{type:ControlType.Color,title:\"Count Border Color\",defaultValue:\"#FFFFFF\"},countBorderWidth:{type:ControlType.Number,title:\"Count Border Width\",defaultValue:3,min:0,max:10,step:1},labelBorderColor:{type:ControlType.Color,title:\"Label Border Color\",defaultValue:\"#FFFFFF\"},labelBorderWidth:{type:ControlType.Number,title:\"Label Border Width\",defaultValue:3,min:0,max:10,step:1},counterBubbleSize:{type:ControlType.Number,title:\"Counter Bubble Size\",defaultValue:80,min:40,max:150,step:1,unit:\"px\"},labelFontSize:{type:ControlType.Number,title:\"Label Font Size\",defaultValue:22,min:8,max:48,step:1,unit:\"px\"},counterFontSize:{type:ControlType.Number,title:\"Counter Font Size\",defaultValue:32,min:8,max:64,step:1,unit:\"px\"},labelBorderRadiusTopLeft:{type:ControlType.Number,title:\"Label Radius TL\",defaultValue:50,min:0,max:100,step:1,unit:\"px\"},labelBorderRadiusTopRight:{type:ControlType.Number,title:\"Label Radius TR\",defaultValue:50,min:0,max:100,step:1,unit:\"px\"},labelBorderRadiusBottomRight:{type:ControlType.Number,title:\"Label Radius BR\",defaultValue:50,min:0,max:100,step:1,unit:\"px\"},labelBorderRadiusBottomLeft:{type:ControlType.Number,title:\"Label Radius BL\",defaultValue:50,min:0,max:100,step:1,unit:\"px\"},font:{type:ControlType.Font,title:\"Text Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"22px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},countFont:{type:ControlType.Font,title:\"Count Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"32px\",variant:\"Bold\",letterSpacing:\"-0.03em\",lineHeight:\"1em\"}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"UserJoinDisplay\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./UserJoinDisplay_1.map"],"mappings":"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"}