{"version":3,"file":"BlogIndexFilter.DZSkCogb.mjs","names":["useState","useRef","__esmMin","window","init_ssg_sandbox_shims","_e","p","c","init_jsx_runtime","ce","init_npm_react_18_3_1","de","RenderTarget","addPropertyControls","init_framer_D6uXRwWs","ControlType","readRows","rowName","el","categoryName","BlogIndexFilter","props","isCanvas","cats","setCats","total","setTotal","selected","setSelected","ALL","open","setOpen","hover","setHover","rootRef","seen","key","cat","counts","count","b","a","apply","frame","onResize","onDown","onKey","current","label","options","style","mono","textColor","showCount","noun","nounPlural","o","valueColor","menuBg","borderColor","active","i","accent","PLURAL","init_BlogIndexFilter"],"sources":["https:/framerusercontent.com/modules/8BC017OysXrq4vWMGkk1/hCXEDOaV1liktpzbCo8r/BlogIndexFilter.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";const ALL=\"__all__\";// Plural labels for the CMS category values; unknown categories fall back to the raw value.\nconst PLURAL={TUTORIAL:\"Tutorials\",FEATURE:\"Features\",INTERVIEW:\"Interviews\",EXERCISES:\"Exercises\",ARTICLE:\"Articles\",\"CASE STUDY\":\"Case studies\",EXPERIMENT:\"Experiments\",STORY:\"Stories\",VIDEO:\"Videos\"};const label=cat=>PLURAL[cat]??cat.charAt(0)+cat.slice(1).toLowerCase();const mono={fontFamily:'\"IBM Plex Mono\", ui-monospace, monospace',fontWeight:500,fontSize:12,lineHeight:\"1.4em\",letterSpacing:\"0.1em\",textTransform:\"uppercase\"};function readRows(rowName,categoryName){if(typeof document===\"undefined\")return[];return Array.from(document.querySelectorAll(`[data-framer-name=\"${rowName}\"]`)).map(el=>({el,key:el.getAttribute(\"href\")??el.textContent??\"\",cat:(el.querySelector(`[data-framer-name=\"${categoryName}\"]`)?.textContent??\"\").trim().toUpperCase()}));}/**\n * Index header for the blog list: article count on the left, a type filter on the right.\n * Filters the CMS rows on the page by their category text.\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */export default function BlogIndexFilter(props){const{showCount,noun=\"article\",nounPlural=\"articles\",rowName,categoryName,textColor,valueColor,accent,menuBg,borderColor,style}=props;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const[cats,setCats]=useState([]);const[total,setTotal]=useState(39);const[selected,setSelected]=useState(ALL);const[open,setOpen]=useState(false);const[hover,setHover]=useState(false);const rootRef=useRef(null);// Collect categories once the CMS rows are in the DOM. Each breakpoint renders its own\n// copy of the list, so articles are counted once by their link.\nuseEffect(()=>{const seen=new Map;readRows(rowName,categoryName).forEach(({key,cat})=>seen.set(key,cat));if(!seen.size)return;const counts=new Map;seen.forEach(cat=>cat&&counts.set(cat,(counts.get(cat)??0)+1));setCats(Array.from(counts,([cat,count])=>({cat,count})).sort((a,b)=>b.count-a.count));setTotal(seen.size);},[rowName,categoryName]);// Show only the rows of the selected type (never touch the canvas). Re-applied on resize,\n// since switching breakpoints renders a fresh copy of the rows.\nuseEffect(()=>{if(isCanvas)return;const apply=()=>readRows(rowName,categoryName).forEach(({el,cat})=>{el.style.display=selected===ALL||cat===selected?\"\":\"none\";});apply();let frame=0;const onResize=()=>{cancelAnimationFrame(frame);frame=requestAnimationFrame(apply);};window.addEventListener(\"resize\",onResize);return()=>{cancelAnimationFrame(frame);window.removeEventListener(\"resize\",onResize);};},[selected,rowName,categoryName,isCanvas]);useEffect(()=>{if(!open)return;const onDown=e=>{if(!rootRef.current?.contains(e.target))setOpen(false);};const onKey=e=>e.key===\"Escape\"&&setOpen(false);document.addEventListener(\"mousedown\",onDown);document.addEventListener(\"keydown\",onKey);return()=>{document.removeEventListener(\"mousedown\",onDown);document.removeEventListener(\"keydown\",onKey);};},[open]);const count=selected===ALL?total:cats.find(c=>c.cat===selected)?.count??0;const current=selected===ALL?\"All, latest first\":label(selected);const options=[{value:ALL,text:\"All, latest first\",count:total}].concat(cats.map(c=>({value:c.cat,text:label(c.cat),count:c.count})));return /*#__PURE__*/_jsxs(\"div\",{ref:rootRef,style:{...style,...mono,position:\"relative\",display:\"flex\",alignItems:\"center\",justifyContent:\"space-between\",flexWrap:\"wrap\",columnGap:24,rowGap:12,color:textColor},children:[showCount&&/*#__PURE__*/_jsx(\"span\",{style:{whiteSpace:\"pre\"},children:`INDEX  /  ${count} ${(count===1?noun:nounPlural).toUpperCase()}`}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\"},children:[/*#__PURE__*/_jsxs(\"button\",{type:\"button\",\"aria-haspopup\":\"listbox\",\"aria-expanded\":open,onClick:()=>setOpen(o=>!o),onMouseEnter:()=>setHover(true),onMouseLeave:()=>setHover(false),style:{...mono,display:\"flex\",alignItems:\"center\",gap:8,padding:0,background:\"transparent\",border:\"none\",color:hover||open?valueColor:textColor,transition:\"color 0.2s\",cursor:\"pointer\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{whiteSpace:\"pre\"},children:`SHOW  /  ${current}`}),/*#__PURE__*/_jsx(\"svg\",{width:\"10\",height:\"10\",viewBox:\"0 0 10 10\",fill:\"none\",style:{transform:open?\"rotate(180deg)\":\"none\",transition:\"transform 0.2s\"},children:/*#__PURE__*/_jsx(\"path\",{d:\"M2 3.5 5 6.5 8 3.5\",stroke:\"currentColor\",strokeWidth:\"1.3\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})})]}),open&&/*#__PURE__*/_jsx(\"div\",{role:\"listbox\",style:{position:\"absolute\",top:\"calc(100% + 8px)\",left:0,zIndex:20,minWidth:\"100%\",width:\"max-content\",padding:6,background:menuBg,border:`1px solid ${borderColor}`,borderRadius:10,boxShadow:\"0 16px 40px rgba(0,0,0,0.45)\"},children:options.map((o,i)=>{const active=o.value===selected;return /*#__PURE__*/_jsxs(\"div\",{children:[i===1&&/*#__PURE__*/_jsx(\"div\",{style:{height:1,margin:\"6px 4px\",background:borderColor}}),/*#__PURE__*/_jsxs(\"button\",{type:\"button\",role:\"option\",\"aria-selected\":active,onClick:()=>{setSelected(o.value);setOpen(false);},onMouseEnter:e=>e.currentTarget.style.background=\"rgba(255,255,255,0.06)\",onMouseLeave:e=>e.currentTarget.style.background=\"transparent\",style:{...mono,width:\"100%\",display:\"flex\",justifyContent:\"space-between\",gap:16,padding:\"9px 10px\",background:\"transparent\",border:\"none\",borderRadius:6,color:active?accent:valueColor,cursor:\"pointer\",textAlign:\"left\"},children:[/*#__PURE__*/_jsx(\"span\",{children:o.text}),/*#__PURE__*/_jsx(\"span\",{style:{color:textColor},children:o.count})]})]},o.value);})})]})]});}BlogIndexFilter.defaultProps={showCount:true,noun:\"article\",nounPlural:\"articles\",rowName:\"Article row\",categoryName:\"Category\",textColor:\"rgb(167, 169, 198)\",valueColor:\"rgb(255, 255, 255)\",accent:\"rgb(89, 248, 232)\",menuBg:\"rgb(20, 22, 42)\",borderColor:\"rgba(255, 255, 255, 0.12)\"};addPropertyControls(BlogIndexFilter,{showCount:{type:ControlType.Boolean,title:\"Count\"},noun:{type:ControlType.String,title:\"Noun\"},nounPlural:{type:ControlType.String,title:\"Noun plural\"},rowName:{type:ControlType.String,title:\"Row layer\"},categoryName:{type:ControlType.String,title:\"Category layer\"},textColor:{type:ControlType.Color,title:\"Text\"},valueColor:{type:ControlType.Color,title:\"Value\"},accent:{type:ControlType.Color,title:\"Active\"},menuBg:{type:ControlType.Color,title:\"Menu\"},borderColor:{type:ControlType.Color,title:\"Border\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BlogIndexFilter\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BlogIndexFilter.map"],"mappings":"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"}