{"version":3,"file":"ClickableNames_2.khDfgwtL.mjs","names":[],"sources":["https:/framerusercontent.com/modules/AgFfOOHXVBtoagt89k1F/arjKIyjmHZjhRp9OhEPe/ClickableNames_2.js"],"sourcesContent":["// Clickable Items component that displays items with names and links from CMS data\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ClickableItems(props){const{items=[{name:\"John Doe\",link:\"https://example.com/john\"},{name:\"Jane Smith\",link:\"https://example.com/jane\"},{name:\"Bob Johnson\",link:\"https://example.com/bob\"}],text=\"John Doe, Jane Smith, Bob Johnson\",textColor,hoverColor,font,spacing,newTab=false,fillContainer=false}=props;// Create a map of names to links for quick lookup\nconst nameToLinkMap=items.reduce((map,item)=>{map[item.name.toLowerCase().trim()]=item.link;return map;},{});// Parse the text field and create clickable elements\nconst renderClickableText=()=>{if(!text)return null;// Split by commas and process each name\nconst names=text.split(\",\").map(name=>name.trim());return names.map((name,index)=>{const link=nameToLinkMap[name.toLowerCase()];if(link){// If we have a matching link, render as clickable\nreturn /*#__PURE__*/_jsxs(\"span\",{children:[/*#__PURE__*/_jsx(\"a\",{href:link,target:newTab?\"_blank\":undefined,rel:newTab?\"noopener noreferrer\":undefined,style:{color:textColor,textDecoration:\"none\",cursor:\"pointer\",transition:\"color 0.2s ease\"},onMouseEnter:e=>{e.currentTarget.style.color=hoverColor;},onMouseLeave:e=>{e.currentTarget.style.color=textColor;},children:name}),index