import { Scroller } from "@/components/ui/scroller"import { Separator } from "@/components/ui/separator"const updates = [  ["9:41 AM", "Your workspace is ready to use."],  ["9:28 AM", "Maya invited you to the design review."],  ["Yesterday", "The project brief was updated."],  ["Yesterday", "A new comment was added to the roadmap."],  ["Monday", "Your weekly summary is available."],  ["Monday", "The team reached its monthly goal."],  ["Friday", "A file was shared with your team."],]export default function ScrollerDemo() {  return (    <Scroller      withNavigation      scrollTriggerMode="click"      className="h-72 w-full max-w-sm rounded-md border px-4"    >      <div className="py-4">        {updates.map(([time, message], index) => (          <div key={`${time}-${message}`}>            <div className="flex gap-4 py-3">              <span className="w-20 shrink-0 text-sm text-muted-foreground">{time}</span>              <p className="text-sm">{message}</p>            </div>            {index < updates.length - 1 && <Separator />}          </div>        ))}      </div>    </Scroller>  )}