Scroll Bars

"use client"

import { ScrollBars } from "@/components/ui/scroll-bars"
import { useRef } from "react"
import { useScroll } from "motion/react"

export default function Default() {
  const ref = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({ container: ref })

  return (
    <div className="flex w-full flex-col items-center gap-6 p-8">
      <ScrollBars scrollYProgress={scrollYProgress} rounded />
      <div
        ref={ref}
        className="h-64 w-full max-w-md overflow-y-auto rounded-xl border border-border p-4"
      >
        <div className="space-y-4">
          {Array.from({ length: 20 }).map((_, i) => (
            <p key={i} className="text-sm text-muted-foreground">
              Keep scrolling to watch the accent indicator glide across the bars as
              your scroll progress advances.
            </p>
          ))}
        </div>
      </div>
    </div>
  )
}