{"version":3,"file":"ClickableImage.DFMKIwIm.mjs","names":["useState","_Fragment"],"sources":["https:/framerusercontent.com/modules/w1rfm4WeSAn0842lbD7S/LLRl4zGhgHFEZuCL5FJD/ClickableImage.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ClickableImage(props){const{imageUrl=\"\",expandedImageUrl=\"\",borderRadius=8,borderColor=\"rgba(255, 255, 255, 0.1)\",aspectRatio=1.6,style}=props;const[isOpen,setIsOpen]=useState(false);const modalImageUrl=expandedImageUrl||imageUrl;useEffect(()=>{if(!isOpen)return;const handleKey=e=>{if(e.key===\"Escape\")setIsOpen(false);};document.addEventListener(\"keydown\",handleKey);return()=>document.removeEventListener(\"keydown\",handleKey);},[isOpen]);if(!imageUrl){return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:\"100%\",aspectRatio:String(aspectRatio),borderRadius,border:`1px solid ${borderColor}`,background:\"rgba(255,255,255,0.04)\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",color:\"rgba(255,255,255,0.3)\",fontSize:13,fontFamily:\"Inter, sans-serif\"},children:\"Set image URL\"});}return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs(\"div\",{onClick:()=>setIsOpen(true),style:{...style,width:\"100%\",aspectRatio:String(aspectRatio),borderRadius,border:`1px solid ${borderColor}`,overflow:\"hidden\",cursor:\"zoom-in\",position:\"relative\"},children:[/*#__PURE__*/_jsx(\"img\",{src:imageUrl,alt:\"\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"}}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",bottom:8,right:8,background:\"rgba(0,0,0,0.6)\",borderRadius:6,padding:\"4px 8px\",display:\"flex\",alignItems:\"center\",gap:4,opacity:.7,transition:\"opacity 0.2s\"},children:[/*#__PURE__*/_jsxs(\"svg\",{width:\"14\",height:\"14\",viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"white\",strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\",children:[/*#__PURE__*/_jsx(\"polyline\",{points:\"15 3 21 3 21 9\"}),/*#__PURE__*/_jsx(\"polyline\",{points:\"9 21 3 21 3 15\"}),/*#__PURE__*/_jsx(\"line\",{x1:\"21\",y1:\"3\",x2:\"14\",y2:\"10\"}),/*#__PURE__*/_jsx(\"line\",{x1:\"3\",y1:\"21\",x2:\"10\",y2:\"14\"})]}),/*#__PURE__*/_jsx(\"span\",{style:{color:\"white\",fontSize:11,fontFamily:\"Inter, sans-serif\"},children:\"Click to expand\"})]})]}),isOpen&&/*#__PURE__*/_jsxs(\"div\",{onClick:()=>setIsOpen(false),style:{position:\"fixed\",top:0,left:0,width:\"100vw\",height:\"100vh\",background:\"rgba(0, 0, 0, 0.9)\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",zIndex:99999,cursor:\"zoom-out\",padding:40,boxSizing:\"border-box\"},children:[/*#__PURE__*/_jsx(\"img\",{src:modalImageUrl,alt:\"\",style:{maxWidth:\"100%\",maxHeight:\"100%\",objectFit:\"contain\",borderRadius:8,boxShadow:\"0 0 60px rgba(0,0,0,0.5)\"}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:20,right:24,color:\"white\",fontSize:32,cursor:\"pointer\",fontFamily:\"Inter, sans-serif\",fontWeight:300,lineHeight:1,opacity:.7},children:\"\\xd7\"})]})]});}addPropertyControls(ClickableImage,{imageUrl:{type:ControlType.String,title:\"Image URL\",defaultValue:\"\"},expandedImageUrl:{type:ControlType.String,title:\"Expanded URL\",defaultValue:\"\",description:\"Optional. Shown in the click-to-expand modal. Falls back to Image URL if empty.\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8,min:0,max:32},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"rgba(255, 255, 255, 0.1)\"},aspectRatio:{type:ControlType.Number,title:\"Aspect Ratio\",defaultValue:1.6,min:.5,max:3,step:.1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ClickableImage\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ClickableImage.map"],"mappings":"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"}