{"version":3,"file":"LocalBlogToc.B8WayP_t.mjs","names":["React.useMemo","React.useState","React.useRef","React.useLayoutEffect","React.useEffect"],"sources":["https:/framerusercontent.com/modules/glc0qhVr31Sw4aoDn6i1/OwfokICgpQ2SBUhGvXJC/LocalBlogToc.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";const useIsomorphicLayoutEffect=typeof window!==\"undefined\"?React.useLayoutEffect:React.useEffect;/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function LocalBlogToc(props){const{title1,title2,title3,title4,iD1,iD2,iD3,iD4,spyLine,pill:pillColor,active:activeColor,inactive:inactiveColor,hover:hoverColor,style}=props;const sections=React.useMemo(()=>[{id:iD1,title:title1},{id:iD2,title:title2},{id:iD3,title:title3},{id:iD4,title:title4}].filter(section=>section.id&&section.title),[iD1,iD2,iD3,iD4,title1,title2,title3,title4]);const[activeId,setActiveId]=React.useState(sections[0]?.id??\"\");const[highlight,setHighlight]=React.useState(null);const listRef=React.useRef(null);React.useEffect(()=>{if(sections.length===0)return;setActiveId(current=>current||sections[0].id);},[sections]);React.useEffect(()=>{if(typeof window===\"undefined\"||typeof document===\"undefined\")return;if(sections.length===0)return;let raf=0;const onScroll=()=>{window.cancelAnimationFrame(raf);raf=window.requestAnimationFrame(()=>{let current=sections[0].id;for(const section of sections){const element=document.getElementById(section.id);if(element&&element.getBoundingClientRect().top<=spyLine){current=section.id;}}setActiveId(current);});};onScroll();window.addEventListener(\"scroll\",onScroll,{passive:true});window.addEventListener(\"resize\",onScroll);return()=>{window.removeEventListener(\"scroll\",onScroll);window.removeEventListener(\"resize\",onScroll);window.cancelAnimationFrame(raf);};},[sections,spyLine]);useIsomorphicLayoutEffect(()=>{if(typeof window===\"undefined\")return;const measure=()=>{const item=listRef.current?.querySelector(`[data-toc-id=\"${activeId}\"]`);if(item)setHighlight({top:item.offsetTop,height:item.offsetHeight});};measure();window.addEventListener(\"resize\",measure);return()=>window.removeEventListener(\"resize\",measure);},[activeId]);return /*#__PURE__*/_jsx(\"nav\",{\"aria-label\":\"On this page\",style:{...style,position:\"relative\",width:\"100%\",alignSelf:\"flex-start\",boxSizing:\"border-box\",fontFamily:\"Inter Variable, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\"},children:/*#__PURE__*/_jsxs(\"div\",{ref:listRef,style:{position:\"relative\",width:\"100%\"},children:[highlight&&/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{position:\"absolute\",left:0,right:0,top:highlight.top,height:highlight.height,borderRadius:4,background:pillColor,transition:\"top 300ms ease-out, height 300ms ease-out, background 300ms ease-out\"}}),sections.map(section=>{const isActive=section.id===activeId;return /*#__PURE__*/_jsx(\"button\",{type:\"button\",\"data-toc-id\":section.id,\"aria-current\":isActive?\"true\":undefined,onClick:()=>{if(typeof document===\"undefined\")return;document.getElementById(section.id)?.scrollIntoView({behavior:\"smooth\"});},style:{position:\"relative\",display:\"block\",width:\"100%\",border:0,borderRadius:4,appearance:\"none\",background:\"transparent\",padding:\"8px 12px\",color:isActive?activeColor:inactiveColor,cursor:\"pointer\",textAlign:\"left\",font:\"inherit\",fontSize:13,fontWeight:400,letterSpacing:0,lineHeight:1.5,transition:\"color 300ms ease\"},onMouseEnter:event=>{if(!isActive)event.currentTarget.style.color=hoverColor;},onMouseLeave:event=>{if(!isActive)event.currentTarget.style.color=inactiveColor;},children:section.title},section.id);})]})});}addPropertyControls(LocalBlogToc,{title1:{type:ControlType.String,title:\"Title 1\",defaultValue:\"Section one\"},title2:{type:ControlType.String,title:\"Title 2\",defaultValue:\"Section two\"},title3:{type:ControlType.String,title:\"Title 3\",defaultValue:\"Section three\"},title4:{type:ControlType.String,title:\"Title 4\",defaultValue:\"Section four\"},iD1:{type:ControlType.String,title:\"ID 1\",defaultValue:\"section-1\"},iD2:{type:ControlType.String,title:\"ID 2\",defaultValue:\"section-2\"},iD3:{type:ControlType.String,title:\"ID 3\",defaultValue:\"section-3\"},iD4:{type:ControlType.String,title:\"ID 4\",defaultValue:\"section-4\"},spyLine:{type:ControlType.Number,title:\"Spy Line\",defaultValue:160,min:80,max:240,step:1},pill:{type:ControlType.Color,title:\"Pill\",defaultValue:\"#1f1f1f\"},active:{type:ControlType.Color,title:\"Active\",defaultValue:\"#fafafa\"},inactive:{type:ControlType.Color,title:\"Inactive\",defaultValue:\"#a3a3a3\"},hover:{type:ControlType.Color,title:\"Hover\",defaultValue:\"#d4d4d4\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LocalBlogToc\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LocalBlogToc.map"],"mappings":"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"}