Scroll area

import { ScrollArea } from '@raystack/apsara';

export default function Example() {
  return (
    <ScrollArea style={{ height: '200px', width: '300px' }}>
      <div style={{ padding: '16px' }}>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
      </div>
    </ScrollArea>
  );
}

{/* Always visible scrollbar */}
<ScrollArea type="always">
  {/* content */}
</ScrollArea>

{/* Show on hover */}
<ScrollArea type="hover">
  {/* content */}
</ScrollArea>

{/* Show on scroll */}
<ScrollArea type="scroll">
  {/* content */}
</ScrollArea>

<ScrollArea style={{ height: '150px' }}>
  <div style={{ width: '1000px', padding: '16px' }}>
    Wide content that requires horizontal scrolling...
  </div>
</ScrollArea>