{"version":3,"file":"BlogdeckTopicBand.Bm3KVElH.mjs","names":["React.useState","React.useRef"],"sources":["https:/framerusercontent.com/modules/Fu9Et9iZN0OBrUt623v3/CdAfyBZIR6EGCye7Oy8y/BlogdeckTopicBand.js"],"sourcesContent":["// Blogdeck · Topic band: eight topic panels side by side. One opens at a time (it cycles until the\n// visitor points at one), showing the cover, the blurb and a link to the topic page.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const F_DISPLAY=`\"Bricolage Grotesque\", \"Inter Display\", system-ui, sans-serif`;const F_UI=`\"Instrument Sans\", \"Inter\", system-ui, sans-serif`;const F_MONO=`\"JetBrains Mono\", ui-monospace, monospace`;const U=id=>`https://images.unsplash.com/${id}?crop=entropy&cs=srgb&fm=jpg&ixlib=rb-4.1.0&q=80&w=900`;const TOPICS=[[\"Design\",\"#FF5A1F\",42,\"Objects, rooms and the choices behind them.\",\"photo-1579477402070-798fd86c4904\",\"design\"],[\"Money\",\"#13A45A\",31,\"Rent, pay, prices and savings, explained.\",\"photo-1599038988300-2e3f04d87f8b\",\"money\"],[\"Science\",\"#2F5BFF\",28,\"From the edge of the sky to the inside of your head.\",\"photo-1727034393564-dc7b0275686d\",\"science\"],[\"Food\",\"#F2A100\",26,\"Recipes that fit a weekday.\",\"photo-1589661329742-713c46926e34\",\"food\"],[\"Travel\",\"#00A3C4\",24,\"Slow routes and small places, no car needed.\",\"photo-1777557215949-192a8c51862a\",\"travel\"],[\"Culture\",\"#E0226E\",33,\"Music, film, television and the people behind them.\",\"photo-1616714109948-c74fe5029a4d\",\"culture\"],[\"Tech\",\"#7B4DFF\",30,\"The machines in your pocket, explained plainly.\",\"photo-1593687395549-400945fed803\",\"tech\"],[\"Health\",\"#E8475F\",19,\"Sleep, movement and the research read properly.\",\"photo-1771011521821-e3d984f30522\",\"health\"]];let fontsInjected=false;function injectFonts(){if(fontsInjected||typeof document===\"undefined\")return;fontsInjected=true;const l=document.createElement(\"link\");l.rel=\"stylesheet\";l.href=\"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,400..800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap\";document.head.appendChild(l);const s=document.createElement(\"style\");s.textContent=`.bd-band a:focus-visible{outline:2px solid #0B0C0F;outline-offset:3px}`;document.head.appendChild(s);}/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function BlogdeckTopicBand(props){const{topicsPath=\"/topics/\",interval=3.2,previewIndex=-1}=props;const isStatic=useIsStaticRenderer();const[active,setActive]=React.useState(previewIndex>=0?previewIndex:0);const[hover,setHover]=React.useState(false);const[w,setW]=React.useState(1200);const root=React.useRef(null);React.useEffect(()=>{injectFonts();const el=root.current;const ro=new ResizeObserver(()=>setW(el.offsetWidth||1200));ro.observe(el);return()=>ro.disconnect();},[]);React.useEffect(()=>{if(isStatic||hover||previewIndex>=0)return;const reduce=window.matchMedia&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;if(reduce)return;const iv=setInterval(()=>setActive(a=>(a+1)%TOPICS.length),interval*1e3);return()=>clearInterval(iv);},[hover,isStatic,interval,previewIndex]);const vertical=w<700;const ease=\"cubic-bezier(.16,1,.3,1)\";return /*#__PURE__*/_jsx(\"div\",{ref:root,className:\"bd-band\",onPointerLeave:()=>setHover(false),style:{width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:vertical?\"column\":\"row\",gap:8,fontFamily:F_UI},children:TOPICS.map((t,i)=>{const on=i===active;return /*#__PURE__*/_jsxs(\"a\",{href:topicsPath+t[5],onPointerEnter:()=>{setHover(true);setActive(i);},onFocus:()=>setActive(i),\"aria-label\":`${t[0]}: ${t[2]} stories`,style:{position:\"relative\",flex:on?vertical?4:5.2:1,minWidth:0,minHeight:0,borderRadius:18,overflow:\"hidden\",textDecoration:\"none\",color:\"#fff\",background:t[1],transition:`flex .7s ${ease}`},children:[/*#__PURE__*/_jsx(\"img\",{src:U(t[4]),alt:\"\",draggable:false,style:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",objectFit:\"cover\",opacity:on?1:0,transform:on?\"scale(1)\":\"scale(1.12)\",transition:`opacity .6s ${ease}, transform 1.2s ${ease}`}}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",inset:0,background:on?`linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.72))`:\"transparent\",transition:`background .5s ${ease}`}}),!on&&!vertical&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:\"50%\",bottom:18,transform:\"translateX(-50%) rotate(180deg)\",writingMode:\"vertical-rl\",fontFamily:F_DISPLAY,fontWeight:700,fontSize:22,letterSpacing:\"-0.01em\",whiteSpace:\"nowrap\"},children:t[0]}),!on&&vertical&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",left:16,top:\"50%\",transform:\"translateY(-50%)\",fontFamily:F_DISPLAY,fontWeight:700,fontSize:18},children:t[0]}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",left:20,right:20,bottom:18,opacity:on?1:0,transform:on?\"none\":\"translateY(10px)\",transition:`opacity .45s ${ease} .15s, transform .6s ${ease} .15s`},children:[/*#__PURE__*/_jsxs(\"div\",{style:{fontFamily:F_MONO,fontSize:11,letterSpacing:\"0.06em\",textTransform:\"uppercase\",opacity:.8},children:[t[2],\" stories\"]}),/*#__PURE__*/_jsx(\"div\",{style:{marginTop:6,fontFamily:F_DISPLAY,fontWeight:700,fontSize:vertical?30:42,lineHeight:1,letterSpacing:\"-0.02em\",fontVariationSettings:'\"wdth\" 92, \"opsz\" 72'},children:t[0]}),/*#__PURE__*/_jsx(\"div\",{style:{marginTop:8,fontSize:14.5,lineHeight:1.4,opacity:.86,maxWidth:320},children:t[3]}),/*#__PURE__*/_jsxs(\"div\",{style:{marginTop:12,display:\"inline-flex\",alignItems:\"center\",gap:8,height:34,padding:\"0 14px\",borderRadius:999,background:\"#fff\",color:\"#0B0C0F\",fontSize:13.5,fontWeight:600},children:[\"Read \",t[0],\" →\"]})]})]},t[0]);})});}addPropertyControls(BlogdeckTopicBand,{topicsPath:{type:ControlType.String,title:\"Topic Path\",defaultValue:\"/topics/\"},interval:{type:ControlType.Number,title:\"Cycle (s)\",defaultValue:3.2,min:1.5,max:10,step:.1},previewIndex:{type:ControlType.Number,title:\"Preview\",defaultValue:-1,min:-1,max:7,step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BlogdeckTopicBand\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BlogdeckTopicBand.map"],"mappings":"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"}