{"version":3,"file":"BlogCategoryFilter.DtYfLD0f.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/l3fFkO13ExDnwaszgOBh/Efqd8TcNMGaEgkNVbBjp/BlogCategoryFilter.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useState,useEffect,useRef}from\"react\";const CATEGORIES=[{name:\"View all\",slug:\"\"},{name:\"LinkedIn\",slug:\"linkedin\"},{name:\"Lead generation\",slug:\"lead-generation\"},{name:\"Outbound\",slug:\"outbound\"},{name:\"Paid\",slug:\"paid\"},{name:\"Sales\",slug:\"sales\"},{name:\"Strategy\",slug:\"strategy\"},{name:\"Marketing\",slug:\"marketing\"},{name:\"Tools & reviews\",slug:\"tools-reviews\"}];export default function BlogCategoryFilter(props){const{baseUrl=\"/blog\",currentCategory=\"\",previewActive=\"\"}=props;const isCanvas=RenderTarget.current()===RenderTarget.canvas;const font=\"'Geist', 'Inter', system-ui, sans-serif\";const[activeSlug,setActiveSlug]=useState(\"\");const[isOpen,setIsOpen]=useState(false);const wrapperRef=useRef(null);useEffect(()=>{if(isCanvas){setActiveSlug(previewActive);return;}if(currentCategory&&currentCategory!==\":slug\"&&!currentCategory.startsWith(\":\")){setActiveSlug(currentCategory);return;}const path=window.location.pathname;const match=path.match(/\\/blog\\/category\\/([^/]+)/);setActiveSlug(match?match[1]:\"\");},[isCanvas,previewActive,currentCategory]);useEffect(()=>{const handleClick=e=>{if(wrapperRef.current&&!wrapperRef.current.contains(e.target)){setIsOpen(false);}};document.addEventListener(\"mousedown\",handleClick);return()=>document.removeEventListener(\"mousedown\",handleClick);},[]);const getHref=slug=>slug?`${baseUrl}/category/${slug}`:baseUrl;const activeCategory=CATEGORIES.find(c=>c.slug===activeSlug)||CATEGORIES[0];const handleDropdownSelect=slug=>{setIsOpen(false);if(!isCanvas)window.location.href=getHref(slug);else setActiveSlug(slug);};return /*#__PURE__*/_jsxs(\"div\",{ref:wrapperRef,style:{width:\"100%\",fontFamily:font,position:\"relative\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n                /* ── Pill row ── */\n                .bcf-row {\n                    display: flex;\n                    flex-direction: row;\n                    gap: 8px;\n                    width: 100%;\n                }\n\n                /* ── Pill ── */\n                .bcf-pill {\n                    flex: 1 1 0;\n                    min-width: fit-content;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    height: 44px;\n                    padding: 0 16px;\n                    border-radius: 10px;\n                    font-size: 15px;\n                    font-weight: 500;\n                    font-family: inherit;\n                    white-space: nowrap;\n                    text-decoration: none;\n                    box-sizing: border-box;\n                    letter-spacing: -0.01em;\n                    transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.15s ease;\n                }\n                .bcf-pill-inactive {\n                    background-color: #ffffff;\n                    border: 1px solid #E2E8F0;\n                    color: #374151;\n                    box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n                    cursor: pointer;\n                }\n                .bcf-pill-inactive:hover {\n                    border-color: #203EEB;\n                    box-shadow: 0 4px 16px rgba(32,62,235,0.12);\n                    color: #111111;\n                }\n                .bcf-pill-active {\n                    background-color: #203EEB;\n                    border: 1px solid #203EEB;\n                    color: #ffffff;\n                    box-shadow: 0 4px 16px rgba(32,62,235,0.2);\n                    cursor: default;\n                    pointer-events: none;\n                }\n\n                /* ── Tablet/mobile trigger — hidden by default ── */\n                .bcf-trigger {\n                    display: none;\n                    width: 100%;\n                    align-items: center;\n                    justify-content: center;\n                    gap: 10px;\n                    cursor: pointer;\n                    background-color: #ffffff;\n                    border: 1.5px solid #E2E8F0;\n                    border-radius: 12px;\n                    padding: 0 20px;\n                    height: 52px;\n                    font-family: inherit;\n                    font-size: 17px;\n                    font-weight: 600;\n                    color: #111111;\n                    letter-spacing: -0.02em;\n                    box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n                    transition: border-color 0.18s ease, box-shadow 0.18s ease;\n                    box-sizing: border-box;\n                    text-align: center;\n                }\n                .bcf-trigger:hover {\n                    border-color: #203EEB;\n                    box-shadow: 0 4px 16px rgba(32,62,235,0.12);\n                }\n                .bcf-trigger-icon {\n                    color: #374151;\n                    flex-shrink: 0;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n\n                /* ── Dropdown ── */\n                .bcf-dropdown {\n                    position: absolute;\n                    top: calc(100% + 8px);\n                    left: 0;\n                    right: 0;\n                    background: #ffffff;\n                    border-radius: 12px;\n                    border: 1.5px solid #E2E8F0;\n                    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);\n                    overflow: hidden;\n                    z-index: 100;\n                    animation: bcfFadeIn 0.15s ease;\n                }\n                @keyframes bcfFadeIn {\n                    from { opacity: 0; transform: translateY(-6px); }\n                    to   { opacity: 1; transform: translateY(0); }\n                }\n                .bcf-dropdown-item {\n                    display: flex;\n                    align-items: center;\n                    gap: 10px;\n                    width: 100%;\n                    padding: 13px 20px;\n                    font-family: inherit;\n                    font-size: 16px;\n                    font-weight: 500;\n                    letter-spacing: -0.01em;\n                    text-decoration: none;\n                    cursor: pointer;\n                    background: none;\n                    border: none;\n                    text-align: left;\n                    box-sizing: border-box;\n                    transition: background-color 0.1s ease;\n                    color: #374151;\n                }\n                .bcf-dropdown-item:hover { background-color: rgba(17,17,17,0.04); }\n                .bcf-dropdown-item.active {\n                    color: #203EEB;\n                    font-weight: 600;\n                    cursor: default;\n                    pointer-events: none;\n                }\n\n                /* ── Breakpoints — use flex (block-level) not inline-flex ── */\n                @media (max-width: 1024px) {\n                    .bcf-row     { display: none; }\n                    .bcf-trigger { display: flex; }\n                }\n            `}),/*#__PURE__*/_jsx(\"div\",{className:\"bcf-row\",children:CATEGORIES.map(cat=>{const isActive=cat.slug===activeSlug;return /*#__PURE__*/_jsx(\"a\",{href:isCanvas?undefined:getHref(cat.slug),onClick:isCanvas?e=>{e.preventDefault();setActiveSlug(cat.slug);}:undefined,className:`bcf-pill ${isActive?\"bcf-pill-active\":\"bcf-pill-inactive\"}`,children:cat.name},cat.slug);})}),/*#__PURE__*/_jsxs(\"button\",{className:\"bcf-trigger\",onClick:()=>setIsOpen(prev=>!prev),\"aria-expanded\":isOpen,children:[/*#__PURE__*/_jsx(\"span\",{className:\"bcf-trigger-icon\",children:/*#__PURE__*/_jsxs(\"svg\",{width:\"18\",height:\"18\",viewBox:\"0 0 16 16\",fill:\"none\",children:[/*#__PURE__*/_jsx(\"rect\",{x:\"1\",y:\"1\",width:\"6\",height:\"6\",rx:\"1.5\",fill:\"currentColor\"}),/*#__PURE__*/_jsx(\"rect\",{x:\"9\",y:\"1\",width:\"6\",height:\"6\",rx:\"1.5\",fill:\"currentColor\"}),/*#__PURE__*/_jsx(\"rect\",{x:\"1\",y:\"9\",width:\"6\",height:\"6\",rx:\"1.5\",fill:\"currentColor\"}),/*#__PURE__*/_jsx(\"rect\",{x:\"9\",y:\"9\",width:\"6\",height:\"6\",rx:\"1.5\",fill:\"currentColor\"})]})}),/*#__PURE__*/_jsx(\"span\",{children:activeSlug?activeCategory.name:\"Category\"})]}),isOpen&&/*#__PURE__*/_jsx(\"div\",{className:\"bcf-dropdown\",role:\"listbox\",children:CATEGORIES.map(cat=>{const isActive=cat.slug===activeSlug;return /*#__PURE__*/_jsxs(\"a\",{href:isCanvas?undefined:getHref(cat.slug),role:\"option\",\"aria-selected\":isActive,className:`bcf-dropdown-item ${isActive?\"active\":\"\"}`,onClick:isCanvas?e=>{e.preventDefault();handleDropdownSelect(cat.slug);}:()=>setIsOpen(false),children:[isActive?/*#__PURE__*/_jsxs(\"svg\",{width:\"14\",height:\"14\",viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"#203EEB\",strokeWidth:\"2.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\",style:{flexShrink:0},children:[/*#__PURE__*/_jsx(\"line\",{x1:\"5\",y1:\"12\",x2:\"19\",y2:\"12\"}),/*#__PURE__*/_jsx(\"polyline\",{points:\"12 5 19 12 12 19\"})]}):/*#__PURE__*/_jsx(\"span\",{style:{width:14,flexShrink:0}}),cat.name]},cat.slug);})})]});}addPropertyControls(BlogCategoryFilter,{baseUrl:{title:\"Base URL\",type:ControlType.String,defaultValue:\"/blog\",description:\"Base path for the blog.\"},currentCategory:{title:\"Current category\",type:ControlType.String,defaultValue:\"\",description:\"Bind to the Category slug CMS field on category pages to highlight the active pill.\"},previewActive:{title:\"Preview active\",type:ControlType.Enum,options:CATEGORIES.map(c=>c.slug),optionTitles:CATEGORIES.map(c=>c.name),defaultValue:\"\",description:\"Canvas-only: simulate active category.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BlogCategoryFilter\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BlogCategoryFilter.map"],"mappings":"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"}