ScrollArea

import { ScrollArea } from '@bindshq/stance-react';

const activity = [
  'Priya Nair deployed the Sales team signature to 12 mailboxes',
  'Amara Okafor updated the legal disclaimer',
  'Exchange relay synced 48 mailboxes',
  'Lukas Brenner joined the organisation',
  'Hana Sato approved the Finance template',
  'Tomás Ruiz requested access to Integrations',
  'Owen Price created the Q4 summit banner',
  'Zainab Haddad archived the Holiday template',
  'Mateja Kovač connected Azure AD',
  'Rollout completed for Customer Success',
];

export function Basic() {
  return (
    <div
      style={{
        maxWidth: 420,
        border: '1px solid var(--st-color-border-default)',
        borderRadius: 12,
      }}
    >
      <ScrollArea label="Recent activity" maxHeight={200}>
        <ul style={{ margin: 0, padding: '8px 16px' }}>
          {activity.map((a) => (
            <li key={a} style={{ padding: '8px 0' }}>
              {a}
            </li>
          ))}
        </ul>
      </ScrollArea>
    </div>
  );
}

import { ScrollArea } from '@bindshq/stance-react';

export function Horizontal() {
  return (
    <ScrollArea label="Signature templates" orientation="horizontal" style={{ maxWidth: 520 }}>
      <div style={{ display: 'flex', gap: 12, padding: 4, width: 'max-content' }}>
        {[
          'Standard',
          'Sales team',
          'Legal',
          'Recruiting',
          'Q4 summit',
          'Holiday',
          'Support',
          'Partners',
        ].map((t) => (
          <div
            key={t}
            style={{
              width: 140,
              height: 90,
              padding: 12,
              borderRadius: 10,
              border: '1px solid var(--st-color-border-default)',
              background: 'var(--st-color-bg-subtle)',
            }}
          >
            {t}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

import { ScrollArea } from '@bindshq/stance-react';

export function NoFade() {
  return (
    <ScrollArea label="Legal disclaimer" maxHeight={140} fade={false} style={{ maxWidth: 480 }}>
      <p style={{ margin: 0 }}>
        This email and any attachments are confidential and intended solely for the addressee. If
        you have received it in error, please notify the sender and delete it. Binds d.o.o. accepts
        no liability for changes made to this message after it was sent. Opinions expressed are
        those of the author and do not necessarily represent Binds. Our privacy notice explains how
        we process personal data in correspondence and is available at binds.si/privacy.
      </p>
    </ScrollArea>
  );
}