Scroll area

'use client';
import { ScrollArea, type ScrollAreaVariant } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "variant": "vertical"
  };
  const variant = settings.variant as ScrollAreaVariant;
  const horizontal = variant === 'horizontal';
  const concurrently = variant === 'concurrently';

  const items = Array.from(
    { length: concurrently ? 24 : 20 },
    (_, index) => `content ${index + 1}`,
  );
  return (
    <ScrollArea
      key={variant}
      variant={variant}
      style={{ width: 320, maxWidth: '100%', height: 240 }}
      viewportProps={{
        role: 'region',
        'aria-label': "Content list",
        style: { overscrollBehavior: 'contain' },
      }}
    >
      <ul
        style={{
          display: 'grid',
          gridAutoFlow: horizontal ? 'column' : 'row',
          gridAutoColumns: horizontal ? 168 : undefined,
          gridTemplateColumns: concurrently ? 'repeat(3, 1fr)' : undefined,
          minWidth: concurrently ? 560 : undefined,
          gap: horizontal || concurrently ? 12 : 0,
          listStyle: 'none',
          padding: 0,
          margin: 0,
        }}
      >
        {items.map((content, index) => (
          <li
            key={index}
            style={{
              display: 'flex',
              flexDirection: horizontal ? 'column' : 'row',
              alignItems: horizontal ? 'flex-start' : 'center',
              gap: 12,
              padding: horizontal ? 16 : '16px 12px',
              height: horizontal ? 208 : undefined,
              borderBottom: '1px solid var(--riido-border-subtle)',
              background: 'var(--riido-surface-1)',
            }}
          >
            <span>{content}</span>
          </li>
        ))}
      </ul>
    </ScrollArea>
  );
}