4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T1022,"use client"; import { useRef, useState } from "react"; import { Avatar } from "../avatar/avatar"; import { DemoFrame } from "../lib/demo-frame"; import { ToggleGroup, ToggleGroupItem } from "../toggle-group/toggle-group"; import { ScrollArea } from "./scroll-area"; type Kind = "merged" | "review" | "comment" | "deploy" | "issue"; const EVENTS: { who: string; kind: Kind; what: string; ago: string }[] = [ { who: "Maya Chen", kind: "merged", what: "Fix sheet scroll handoff on iOS", ago: "2m" }, { who: "Jonas Weber", kind: "review", what: "Requested changes on #482", ago: "9m" }, { who: "Priya Raman", kind: "deploy", what: "Shipped v0.14.2 to production", ago: "21m" }, { who: "Leo Martins", kind: "comment", what: "“Thumb should thicken on hover”", ago: "34m" }, { who: "Ana Sousa", kind: "issue", what: "Opened #491 Fades flicker in Safari 17", ago: "1h" }, { who: "Maya Chen", kind: "review", what: "Approved #479 Progressive blur", ago: "1h" }, { who: "Kenji Sato", kind: "merged", what: "Add superellipse fallback path", ago: "2h" }, { who: "Jonas Weber", kind: "comment", what: "“Can we pin the corner exponent?”", ago: "2h" }, { who: "Priya Raman", kind: "deploy", what: "Shipped v0.14.1 to staging", ago: "3h" }, { who: "Ana Sousa", kind: "merged", what: "Tokenise scrollbar colours", ago: "4h" }, { who: "Leo Martins", kind: "issue", what: "Opened #488 Rubber-band too loose", ago: "5h" }, { who: "Kenji Sato", kind: "review", what: "Commented on #476", ago: "6h" }, { who: "Maya Chen", kind: "deploy", what: "Rolled back v0.14.0", ago: "8h" }, { who: "Jonas Weber", kind: "merged", what: "Velocity projection for pagers", ago: "Yesterday" }, { who: "Ana Sousa", kind: "comment", what: "“Feather looks right at 20px”", ago: "Yesterday" }, { who: "Priya Raman", kind: "issue", what: "Closed #470 Focus ring clipped", ago: "Mon" }, ]; const FILTERS: { value: "all" | Kind; label: string }[] = [ { value: "all", label: "All" }, { value: "merged", label: "Merged" }, { value: "review", label: "Reviews" }, { value: "comment", label: "Comments" }, { value: "deploy", label: "Deploys" }, { value: "issue", label: "Issues" }, ]; /** An activity feed: a horizontal filter row and a vertical list, both in Scroll Areas. */ export function ScrollAreaDemo() { const [filter, setFilter] = useState<"all" | Kind>("all"); const list = useRef(null); const rows = filter === "all" ? EVENTS : EVENTS.filter((e) => e.kind === filter); return ( { if (!v[0]) return; // one filter is always on setFilter(v[0] as "all" | Kind); list.current?.scrollTo({ top: 0 }); }} aria-label="Filter activity" variant="chips" className="w-max px-4 py-2.5" > {FILTERS.map((f) => ( {f.label} ))}

{e.who} {e.what}

{e.kind}

{e.ago}

); } 4e:["$","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":[null,["$","$L4f",null,{"namespace":"@eased","registryDependencies":["https://eased.dev/r/scroll-area.json","https://eased.dev/r/eased-demo-frame.json","https://eased.dev/r/avatar.json","https://eased.dev/r/toggle-group.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/eased/scroll-area/scroll-area-demo.tsx","content":"$51","type":"registry:example","target":"@components/eased/scroll-area/scroll-area-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]