Scroll top ring

import { type ReactNode } from "react"
import { ScrollTopRing } from "@/components/ui/scroll-top-ring"

function Panel({ title, context, className = "max-w-md", children }: { title: string; context: string; className?: string; children: ReactNode }) {
  return (
    <section className={`grid w-full gap-5 rounded-overlay border border-border bg-background p-6 shadow-resting max-sm:p-4 ${className}`}>
      <div className="grid gap-1">
        <p className="font-medium">{title}</p>
        <p className="text-sm text-muted-foreground">{context}</p>
      </div>
      {children}
    </section>
  );
}

export function ScrollTopRingDemo() {
  return (
    <Panel title="Changelog" context="Scroll the panel; the button appears and fills." className="max-w-lg">
      <div className="h-80 overflow-y-auto rounded-control border border-border">
        <div className="grid gap-6 p-5">
          {["October 28", "October 21", "October 14", "October 7", "September 30", "September 23", "September 16"].map((week) => (
            <section key={week} className="grid gap-1.5">
              <h3 className="font-medium">Week of {week}</h3>
              <p className="text-sm leading-relaxed text-muted-foreground">Faster search across every workspace, clearer billing emails and a calmer notification centre that groups updates by project.</p>
              <p className="text-sm leading-relaxed text-muted-foreground">Fixed a sync delay on large boards and an export that skipped archived rows.</p>
            </section>
          ))}
        </div>
        <ScrollTopRing threshold={200} />
      </div>
    </Panel>
  );
}