{"version":3,"file":"SlackMessage_1.BLUtDoiT.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/3PesMQumaok36z7BZJyl/3XWsraQFs0T1HUpsjZXU/SlackMessage_1.js"],"sourcesContent":["// Slack-style message component with user avatar, display name, timestamp, message text, and up to 4 customizable emoji reactions with real-time counts. Supports light and dark mode themes.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,startTransition,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function SlackMessage(props){const{avatar={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"User avatar\"},displayName=\"John Doe\",timestamp=\"12:34 PM\",messageText=\"Hey team! Just wanted to share some exciting news about our latest project update. Looking forward to hearing your thoughts!\",darkMode=false,emojiCount=4,emoji1=\"👍\",emoji2=\"❤️\",emoji3=\"😄\",emoji4=\"🎉\",emoji1Base=3,emoji2Base=1,emoji3Base=2,emoji4Base=0,nameFont,timestampFont,messageFont,emojiFont}=props;const[reactions,setReactions]=useState({emoji1:emoji1Base,emoji2:emoji2Base,emoji3:emoji3Base,emoji4:emoji4Base});const[emojiStates,setEmojiStates]=useState({emoji1:false,emoji2:false,emoji3:false,emoji4:false});// Sync reactions with base counts when props change\nuseEffect(()=>{setReactions({emoji1:emoji1Base,emoji2:emoji2Base,emoji3:emoji3Base,emoji4:emoji4Base});},[emoji1Base,emoji2Base,emoji3Base,emoji4Base]);const handleReactionClick=emojiKey=>{startTransition(()=>{setEmojiStates(prev=>{const newState=!prev[emojiKey];// Update count based on state change\nsetReactions(prevReactions=>({...prevReactions,[emojiKey]:newState?prevReactions[emojiKey]+1:Math.max(0,prevReactions[emojiKey]-1)}));return{...prev,[emojiKey]:newState};});});};const theme={background:darkMode?\"#1a1d21\":\"#ffffff\",messageBackground:darkMode?\"#1a1d21\":\"#ffffff\",nameColor:darkMode?\"#ffffff\":\"#1d1c1d\",timestampColor:darkMode?\"#b9b9b9\":\"#616061\",messageColor:darkMode?\"#d1d2d3\":\"#1d1c1d\",reactionBackground:darkMode?\"#2c2d30\":\"#f8f8f8\",reactionBorder:darkMode?\"#3f4146\":\"#e1e1e1\",reactionHoverBackground:darkMode?\"#3f4146\":\"#e8e8e8\",reactionCountColor:darkMode?\"#d1d2d3\":\"#1d1c1d\"};const isFixedWidth=props?.style&&props.style.width===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{style:{...props.style,position:\"relative\",backgroundColor:theme.background,padding:\"8px 20px\",borderRadius:\"8px\",display:\"flex\",gap:\"8px\",...isFixedWidth?{...props?.style}:{minWidth:\"max-content\"}},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:\"36px\",height:\"36px\",borderRadius:\"4px\",overflow:\"hidden\",flexShrink:0,marginTop:\"2px\"},children:/*#__PURE__*/_jsx(\"img\",{...avatar,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\"}})}),/*#__PURE__*/_jsxs(\"div\",{style:{flex:1,display:\"flex\",flexDirection:\"column\",gap:\"2px\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"baseline\",gap:\"8px\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{color:theme.nameColor,fontWeight:\"900\",...nameFont},children:displayName}),/*#__PURE__*/_jsx(\"span\",{style:{color:theme.timestampColor,fontSize:\"12px\",...timestampFont},children:timestamp})]}),/*#__PURE__*/_jsx(\"div\",{style:{color:theme.messageColor,lineHeight:\"1.46668\",wordBreak:\"break-word\",...messageFont},children:messageText}),/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",gap:\"4px\",marginTop:\"4px\",flexWrap:\"wrap\"},children:[{emoji:emoji1,key:\"emoji1\"},{emoji:emoji2,key:\"emoji2\"},{emoji:emoji3,key:\"emoji3\"},{emoji:emoji4,key:\"emoji4\"}].slice(0,emojiCount).map(({emoji,key})=>{const isActive=emojiStates[key];return /*#__PURE__*/_jsxs(\"button\",{onClick:()=>handleReactionClick(key),style:{display:\"flex\",alignItems:\"center\",gap:\"4px\",padding:\"8px 12px\",backgroundColor:isActive?\"#E7F7FE\":theme.reactionBackground,border:`1px solid ${isActive?\"#2E629E\":theme.reactionBorder}`,borderRadius:\"99px\",cursor:\"pointer\",fontSize:\"13px\",transition:\"background-color 0.1s ease, border-color 0.1s ease\",...emojiFont},onMouseEnter:e=>{if(!isActive){e.currentTarget.style.backgroundColor=theme.reactionHoverBackground;}},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=isActive?\"#E7F7FE\":theme.reactionBackground;},children:[/*#__PURE__*/_jsx(\"span\",{style:{fontSize:\"12px\"},children:emoji}),/*#__PURE__*/_jsx(\"span\",{style:{color:isActive?\"#2E629E\":theme.reactionCountColor,fontSize:\"11px\",fontWeight:\"400\"},children:reactions[key]})]},key);})})]})]});}addPropertyControls(SlackMessage,{avatar:{type:ControlType.ResponsiveImage,title:\"Avatar\"},displayName:{type:ControlType.String,title:\"Display Name\",defaultValue:\"John Doe\"},timestamp:{type:ControlType.String,title:\"Timestamp\",defaultValue:\"12:34 PM\"},messageText:{type:ControlType.String,title:\"Message\",defaultValue:\"Hey team! Just wanted to share some exciting news about our latest project update. Looking forward to hearing your thoughts!\",displayTextArea:true},darkMode:{type:ControlType.Boolean,title:\"Dark Mode\",defaultValue:false,enabledTitle:\"Dark\",disabledTitle:\"Light\"},emojiCount:{type:ControlType.Enum,title:\"Number of Emojis\",options:[1,2,3,4],optionTitles:[\"1\",\"2\",\"3\",\"4\"],defaultValue:4,displaySegmentedControl:true},emoji1:{type:ControlType.String,title:\"Emoji 1\",defaultValue:\"👍\"},emoji2:{type:ControlType.String,title:\"Emoji 2\",defaultValue:\"❤️\",hidden:({emojiCount})=>emojiCount<2},emoji3:{type:ControlType.String,title:\"Emoji 3\",defaultValue:\"😄\",hidden:({emojiCount})=>emojiCount<3},emoji4:{type:ControlType.String,title:\"Emoji 4\",defaultValue:\"🎉\",hidden:({emojiCount})=>emojiCount<4},emoji1Base:{type:ControlType.Number,title:\"Emoji 1 Base Count\",defaultValue:3,min:0,step:1},emoji2Base:{type:ControlType.Number,title:\"Emoji 2 Base Count\",defaultValue:1,min:0,step:1,hidden:({emojiCount})=>emojiCount<2},emoji3Base:{type:ControlType.Number,title:\"Emoji 3 Base Count\",defaultValue:2,min:0,step:1,hidden:({emojiCount})=>emojiCount<3},emoji4Base:{type:ControlType.Number,title:\"Emoji 4 Base Count\",defaultValue:0,min:0,step:1,hidden:({emojiCount})=>emojiCount<4},nameFont:{type:ControlType.Font,title:\"Name Font\",defaultValue:{fontSize:\"15px\",variant:\"Bold\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},timestampFont:{type:ControlType.Font,title:\"Timestamp Font\",defaultValue:{fontSize:\"12px\",variant:\"Regular\",letterSpacing:\"-0.01em\",lineHeight:\"1.3em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},messageFont:{type:ControlType.Font,title:\"Message Font\",defaultValue:{fontSize:\"15px\",variant:\"Regular\",letterSpacing:\"-0.01em\",lineHeight:\"1.46em\"},controls:\"extended\",defaultFontType:\"sans-serif\"},emojiFont:{type:ControlType.Font,title:\"Reaction Font\",defaultValue:{fontSize:\"11px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1em\"},controls:\"extended\",defaultFontType:\"sans-serif\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SlackMessage\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SlackMessage_1.map"],"mappings":"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"}