Scroll Progress

'use client';

import { ScrollProgress } from '@/components/ui/scroll-progress';
import * as React from 'react';

export default function ScrollProgressDemo() {
  const containerRef = React.useRef<HTMLDivElement>(null);

  return (
    <div className="grid w-full max-w-3xl gap-3">
      <p className="text-xs text-muted-foreground uppercase">Scoped to container</p>

      <div className="relative h-72 overflow-hidden rounded-md border border-border">
        <ScrollProgress target={containerRef} className="absolute inset-x-0 top-0 h-[3px]" />
        <div
          ref={containerRef}
          className="h-full overflow-y-auto px-5 py-4 text-sm leading-relaxed text-muted-foreground"
        >
          {Array.from({ length: 18 }).map((_, i) => (
            <p key={i} className="mb-4">
              {i + 1}. The bar above tracks how far you have scrolled through this panel. Keep reading and it fills from
              the start edge to the end; scroll back up and it retreats. It reads the panel's own scroll position, so it
              works the same inside a modal, a sidebar or the page itself.
            </p>
          ))}
        </div>
      </div>

      <p className="text-xs text-muted-foreground">
        <>
          Tip: omit <code className="font-mono">target</code> to track the whole document scroll, useful on long blog
          posts.
        </>
      </p>
    </div>
  );
}