import { ScrollArea } from "@/components/ui/8bit/scroll-area"import { Separator } from "@/components/ui/separator"const updates = [  ["09:42", "Checkpoint reached", "The old bridge is now open."],  ["09:18", "Item collected", "You found a healing potion."],  ["08:56", "Quest updated", "Bring the map back to the village."],  ["08:31", "New area discovered", "A quiet path winds through the forest."],  ["08:05", "Save complete", "Your progress has been saved."],  ["07:48", "Item collected", "You picked up 12 gold coins."],  ["07:20", "Quest accepted", "Find the missing supplies near the river."],  ["06:55", "Checkpoint reached", "The journey begins at the village gate."],]export default function ScrollAreaDemo() {  return (    <ScrollArea className="h-72 w-full max-w-sm border-2 border-foreground">      <div className="p-4">        {updates.map(([time, title, description], index) => (          <div key={`${time}-${title}`}>            <div className="flex items-start gap-4 py-3">              <span className="pt-0.5 font-mono text-xs text-muted-foreground">{time}</span>              <div className="space-y-1">                <p className="text-sm font-medium">{title}</p>                <p className="text-sm text-muted-foreground">{description}</p>              </div>            </div>            {index < updates.length - 1 && <Separator />}          </div>        ))}      </div>    </ScrollArea>  )}