{"version":3,"file":"SlackMessage_1.WNqq3LTc.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/qwuCvcVH56Xt5ZMz2dyR/e1wBFjeTNunKoN802zlS/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{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?props.fillColor||\"#1a1d21\":props.fillColor||\"#ffffff\",messageBackground:darkMode?props.fillColor||\"#1a1d21\":props.fillColor||\"#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\",shadow:darkMode?\"0 2px 8px rgba(0,0,0,0.32)\":\"0 2px 8px rgba(43,63,103,0.10)\"};const isFixedWidth=props?.style&&props.style.width===\"100%\";return /*#__PURE__*/_jsx(\"div\",{style:{...props.style,position:\"relative\",backgroundColor:theme.background,padding:\"8px 20px\",borderRadius:\"8px\",display:\"flex\",gap:\"8px\",boxShadow:theme.shadow+\", 0 6px 24px rgba(0,0,0,0.13)\",...isFixedWidth?{...props?.style}:{minWidth:\"max-content\"}},children:/*#__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,{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\"},fillColor:{type:ControlType.Color,title:\"Fill Color\",defaultValue:\"#ffffff\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SlackMessage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SlackMessage_1.map"],"mappings":"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"}