Scroll Area

import * as React from "react"
 
export function PulsoScrollArea({ children, label }: { children: React.ReactNode; label: string }) {
  return (
    <div role="region" aria-label={label} tabIndex={0} className="max-h-80 overflow-auto rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--card)] p-3 focus-visible:outline focus-visible:outline-[var(--ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)]">
      {children}
    </div>
  )
}

<PulsoScrollArea label="Menções recentes"><ul>{mentions.map((mention) => <li>{mention.title}</li>)}</ul></PulsoScrollArea>

<div class="scroll-area" role="region" aria-label="Menções recentes" tabindex="0"><ul><li>Menção crítica</li><li>Menção em atenção</li></ul></div>

.scroll-area { max-height:320px; overflow:auto; padding:12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--card); }
.scroll-area:focus-visible { outline:var(--ring-width) solid var(--ring); outline-offset:2px; }
.scroll-area ul { margin:0; padding-left:20px; }