61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T5af2,import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion"; /** One divider per section. `tab` is the word on the coloured tab; the photograph faces the text across the rings. */ const kitchen = { name: "Marlowe Kitchen", book: "The year in four menus", hint: "Press a coloured tab to turn to it" }; const sections = [ { tab: "Spring", colour: "#7fae4c", deep: "#3c641f", title: "First of the green", photo: "https://images.pexels.com/photos/6608620/pexels-photo-6608620.jpeg?auto=compress&cs=tinysrgb&w=900", tone: "#c9c7b4", alt: "A white bowl of green peas and asparagus tips with an egg yolk in the middle, seen from above", caption: "Peas, asparagus, cured yolk", body: "The menu turns over in the week the first asparagus arrives from the farm at Hollin Cross. Everything is cooked for seconds, dressed with good oil and left alone.", dishes: [["Peas, asparagus, cured yolk", "11"], ["Jersey royals, wild garlic butter", "8"], ["Rhubarb, buttermilk, ginger crumb", "9"]], }, { tab: "Summer", colour: "#f0b429", deep: "#8a5a00", title: "Tomatoes all day", photo: "https://images.pexels.com/photos/6461772/pexels-photo-6461772.jpeg?auto=compress&cs=tinysrgb&w=900", tone: "#eeb7c4", alt: "Yellow tomatoes and peppers cut open on a pink plate beside a small pan of pink salt", caption: "Yellow tomatoes, sea salt", body: "By July the kitchen barely needs the stove. Tomatoes come in warm from the tunnel, get salt and twenty minutes on the counter, and go out before they have ever seen a fridge.", dishes: [["Yellow tomatoes, sea salt, basil oil", "10"], ["Grilled courgette, ricotta, mint", "12"], ["Peaches, brown sugar, cold cream", "9"]], }, { tab: "Autumn", colour: "#dd6a2c", deep: "#8f3a0e", title: "Slow oven season", photo: "https://images.pexels.com/photos/9443902/pexels-photo-9443902.jpeg?auto=compress&cs=tinysrgb&w=900", tone: "#2f5d5c", alt: "Scored wedges of roasted pumpkin on a dark teal plate with a sprig of dill", caption: "Roast pumpkin, brown butter", body: "Once the squash is cut the ovens stay on low from breakfast. Roots, brassicas and the last of the orchard fruit go in whole and come out soft enough to eat with a spoon.", dishes: [["Roast pumpkin, brown butter, dill", "11"], ["Hispi cabbage, anchovy, crumbs", "12"], ["Baked apple, oat cream", "8"]], }, { tab: "Winter", colour: "#4a78c2", deep: "#1f3f7a", title: "Out of the larder", photo: "https://images.pexels.com/photos/19185775/pexels-photo-19185775.jpeg?auto=compress&cs=tinysrgb&w=900", tone: "#1a1614", alt: "A black bowl of bright red tomato soup on a black table, seen from above", caption: "Bottled tomato soup", body: "January cooking is whatever we put away in September. Bottled tomatoes, dried beans and a shelf of pickles carry the menu until the ground wakes up again.", dishes: [["Bottled tomato soup, sour cream", "8"], ["White beans, kale, parmesan rind", "12"], ["Marmalade sponge, custard", "9"]], }, ]; // Two sets of measurements in pixels: one for desks, one for phones. const WIDE = { pageW: 350, pageH: 470, gut: 44, tabW: 32, rim: 14, padY: 18, pad: 30, title: 38, text: 15, lead: 24, small: 12.5, tabText: 11.5, hit: 0 }; const SLIM = { pageW: 146, pageH: 374, gut: 20, tabW: 17, rim: 4, padY: 10, pad: 11, title: 19, text: 11.5, lead: 16.5, small: 9.8, tabText: 8.5, hit: 24 }; type Dims = typeof WIDE; const RINGS = [0.14, 0.5, 0.86]; const TILT = 21; // how far the binder leans away from the camera, in degrees const svgUrl = (body: string, w: number, h: number) => `url("data:image/svg+xml;utf8,${encodeURIComponent(``)}")`; const PAPER = svgUrl(``, 240, 240); const CLOTH = svgUrl(``, 200, 200); const CHROME = "linear-gradient(180deg, #5c6166 0%, #f7f9fa 16%, #c3c9ce 30%, #70777d 52%, #2d3135 66%, #9ba3a9 82%, #e4e8eb 92%, #4b5055 100%)"; const PAGE = "#f7f2e6"; /** The printed side of a divider: the words for its section. */ function TextPage({ i, d, uid, active }: { i: number; d: Dims; uid: string; active: boolean }) { const s = sections[i]; return (

{kitchen.name}

{s.title}

); } /** The other side: a full plate photograph of the section that follows. */ function PhotoPage({ i, d, active }: { i: number; d: Dims; active: boolean }) { const s = sections[i]; const m = d.hit ? 8 : 18; return (

{s.alt} — {s.caption} {d.hit ? null : ( )}

); } function Sheet({ d, side, children, edge }: { d: Dims; side: "right" | "left"; children: ReactNode; edge?: boolean }) { const inner = side === "right" ? "left" : "right"; return (

{children} {RINGS.map((r) => (

); } function Tab({ i, d, side, active, focused }: { i: number; d: Dims; side: "right" | "left"; active: boolean; focused: boolean }) { const s = sections[i]; const h = d.pageH / sections.length; const out = side === "right"; return ( ); } function Leaf({ i, d, turned, wait, reduce, active, next, focused, uid, onPick, onKey, onFocus, setRef }: { i: number; d: Dims; turned: boolean; wait: number; reduce: boolean; active: boolean; next: boolean; focused: boolean; uid: string; onPick: () => void; onKey: (e: KeyboardEvent) => void; onFocus: (e: { on: boolean; el: HTMLElement }) => void; setRef: (el: HTMLButtonElement | null) => void }) { const n = sections.length; const angle = useMotionValue(turned ? -180 : 0); const z = useTransform(angle, [0, -90, -180], [(n - i) * 0.7, 30, (i + 1) * 0.7]); const frontShade = useTransform(angle, [0, -90], [0, 0.42]); const backShade = useTransform(angle, [-90, -180], [0.5, 0]); const was = useRef(turned); useEffect(() => { if (was.current === turned || reduce) { was.current = turned; angle.set(turned ? -180 : 0); return; } was.current = turned; const run = animate(angle, turned ? -180 : 0, { duration: 0.95, delay: wait, ease: [0.42, 0, 0.18, 1] }); return () => run.stop(); }, [turned, reduce, wait, angle]); const w = d.gut / 2 + d.pageW + d.tabW; const h = d.pageH / n; return (

{i + 1 < n ? : null}

{/* the control rides on the divider itself, so it stays under your finger while the page turns */} ); } export default function RingBinderTabs() { const reduce = !!useReducedMotion(); const uid = useId(); const wrapRef = useRef(null); const tabs = useRef<(HTMLButtonElement | null)[]>([]); const [slim, setSlim] = useState(false); const [scale, setScale] = useState(1); const [sel, setSel] = useState({ now: 1, was: 1 }); const [focus, setFocus] = useState(-1); const idle = useRef({ touched: false, paused: false }); const d = slim ? SLIM : WIDE; const n = sections.length; const half = d.gut / 2 + d.pageW + d.tabW + d.rim; const W = half * 2; const H = d.pageH + d.padY * 2; useEffect(() => { const wrap = wrapRef.current; if (!wrap) return; const measure = () => { const w = wrap.clientWidth; const narrow = w < 900; const m = narrow ? SLIM : WIDE; setSlim(narrow); setScale(Math.min(narrow ? 1.5 : 1, (w - (narrow ? 24 : 10)) / ((m.gut / 2 + m.pageW + m.tabW + m.rim) * 2))); }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); return () => ro.disconnect(); }, []); // until someone touches it, the binder leafs through the year useEffect(() => { if (reduce) return; const s = idle.current; const t = window.setInterval(() => { if (s.touched || s.paused || document.hidden) return; setSel((v) => ({ now: (v.now + 1) % n, was: v.now })); }, 3400); return () => window.clearInterval(t); }, [reduce, n]); const pick = (i: number, focusIt = false) => { idle.current.touched = true; setSel((v) => (v.now === i ? v : { now: i, was: v.now })); if (focusIt) tabs.current[i]?.focus(); }; const onKey = (i: number) => (e: KeyboardEvent) => { const to = e.key === "ArrowDown" || e.key === "ArrowRight" ? (i + 1) % n : e.key === "ArrowUp" || e.key === "ArrowLeft" ? (i + n - 1) % n : e.key === "Home" ? 0 : e.key === "End" ? n - 1 : -1; if (to < 0) return; e.preventDefault(); pick(to, true); }; const top = d.hit ? 26 : 62; return (

(idle.current.paused = true)} onPointerLeave={() => (idle.current.paused = false)} className="relative mx-auto w-full max-w-[1100px]" style={{ height: Math.round(H * scale) + top + (d.hit ? 100 : 104) }}>

{kitchen.name}: {kitchen.book}

`${uid}-t${i}`).join(" ")} />

{/* the shadow the binder leaves on the desk */}

{/* cloth-covered boards, with the two hinge grooves either side of the spine */}

{/* what is always on the left: the flyleaf, showing the first photograph, on the pages already turned */}

{/* and on the right: the rest of the block under the dividers */}

{sections.map((_, i) => { const turned = i < sel.now; const wait = sel.now > sel.was ? Math.max(0, i - sel.was) * 0.14 : Math.max(0, sel.was - 1 - i) * 0.14; return ( pick(i)} onKey={onKey(i)} setRef={(el) => (tabs.current[i] = el)} onFocus={({ on, el }) => { idle.current.paused = on; setFocus((f) => (on ? (el.matches(":focus-visible") ? i : f) : f === i ? -1 : f)); }} /> ); })}

{/* the mechanism: a steel plate down the spine and three chrome rings standing up over it */} {RINGS.map((r, k) => { const span = d.gut + (d.hit ? 12 : 24); const t = d.hit ? 3.4 : 6.5; const tall = span * 0.56; const y = d.padY + d.pageH * r; const arch = `M${t / 2} ${tall + t / 2} A${span / 2} ${tall} 0 0 1 ${span + t / 2} ${tall + t / 2}`; const gid = `${uid.replace(/:/g, "")}-ring${k}`; return ( ); })}

{kitchen.name}: {kitchen.book} {kitchen.hint}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/ring-binder-tabs-with-coloured-index-dividers-that-turn-over-chrome-rings-to-open-each-section.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]