import { ScrollArea } from "@/components/ui/scroll-area"import { Separator } from "@/components/ui/separator"const updates = [  ["09:42", "Design review", "Maya left feedback on the dashboard"],  ["09:18", "Pull request merged", "Add keyboard shortcuts to search"],  ["Yesterday", "New comment", "Leo commented on the onboarding flow"],  ["Yesterday", "Task completed", "Update the mobile navigation"],  ["Mon, Jun 10", "File uploaded", "Q3 planning notes.pdf"],  ["Mon, Jun 10", "Design review", "Maya shared a new checkout concept"],  ["Fri, Jun 7", "Pull request merged", "Fix spacing in account settings"],  ["Fri, Jun 7", "New comment", "Leo mentioned you in a discussion"],]export default function ScrollAreaDemo() {  return (    <ScrollArea className="h-72 w-full max-w-sm border-2 border-foreground bg-background shadow-[4px_4px_0px_0px_hsl(var(--foreground))]">      <div className="p-4">        {updates.map(([time, title, description], index) => (          <div key={`${time}-${title}-${index}`}>            <div className="flex gap-3 py-3">              <span className="w-20 shrink-0 pt-0.5 text-xs font-bold text-muted-foreground">{time}</span>              <div className="min-w-0">                <p className="font-semibold leading-none">{title}</p>                <p className="mt-1.5 text-sm text-muted-foreground">{description}</p>              </div>            </div>            {index < updates.length - 1 && <Separator />}          </div>        ))}      </div>    </ScrollArea>  )}