Banner

'use client';
import { useRef, useState } from 'react';
import { Banner, Button, type BannerTone } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "showAction": true,
    "content": "Text",
    "actionLabel": "Text",
    "tone": "primary"
  };
  const [visible, setVisible] = useState(true);
  const transferFocus = useRef(false);
  const changeVisibility = (next: boolean, button: HTMLButtonElement) => {
    transferFocus.current =
      button === button.ownerDocument.activeElement &&
      (!next || settings.showAction);
    setVisible(next);
  };
  const restoreFocus = (button: HTMLButtonElement | null) => {
    if (button && transferFocus.current) {
      transferFocus.current = false;
      button.focus();
    }
  };
  return visible ? (
    <Banner
      tone={settings.tone as BannerTone}
      label={<span style={{ whiteSpace: 'pre-wrap' }}>{settings.content}</span>}
      actions={
        settings.showAction ? (
          <Button
            ref={restoreFocus}
            size="sm"
            tone={settings.tone as BannerTone}
            variant="solid"
            onClick={(event) => changeVisibility(false, event.currentTarget)}
          >
            {settings.actionLabel}
          </Button>
        ) : undefined
      }
    />
  ) : (
    <Button
      ref={restoreFocus}
      onClick={(event) => changeVisibility(true, event.currentTarget)}
    >
      {"Show again"}
    </Button>
  );
}