Scroll Gallery Demo

1"use client";
2 
3import { useEffect, useRef, useState } from "react";
4import { CatalogScrollHint } from "@/components/catalog/catalog-scroll-hint";
5import { resolveScrollRoot } from "@/lib/catalog/resolve-scroll-root";
6import { scrollGalleryDemoSlides } from "@/lib/demo/scroll-gallery-demo-slides";
7import { waitForScrollerReady } from "@/lib/scroll/scroller-ready";
8import { ScrollGallery } from "@/components/sora-ui/effects/scroll-gallery";
9 
10export default function ScrollGalleryDemo() {
11  const rootRef = useRef<HTMLDivElement>(null);
12  const [scroller, setScroller] = useState<Element | Window | undefined>();
13 
14  useEffect(() => {
15    const node = rootRef.current;
16    if (!node) {
17      return;
18    }
19 
20    const resolved = resolveScrollRoot(node);
21 
22    waitForScrollerReady(resolved)
23      .then(() => {
24        setScroller(resolved);
25      })
26      .catch(() => {
27        /* preview unmounted */
28      });
29  }, []);
30 
31  return (
32    <div className="w-full" ref={rootRef}>
33      <CatalogScrollHint label="Scroll to reveal slides" />
34 
35      {scroller ? (
36        <ScrollGallery
37          containerQuery
38          embedded
39          linkLabel="Explore"
40          prefixLabel="Featured"
41          scroller={scroller}
42          slides={scrollGalleryDemoSlides}
43          variant="studio"
44        />
45      ) : null}
46    </div>
47  );
48}