Toast

'use client';
import { useEffect } from 'react';
import { ToastProvider, showToast, dismissToast, Button, Icon } from '@mbsw/ui';
import { CircleCheck } from 'lucide-react';

export default function Demo() {
  const settings = {
    "showIcon": true,
    "title": "Title",
    "description": "Description"
  };
  useEffect(
    () => () => {
      dismissToast();
    },
    [],
  );

  return (
    <>
      <ToastProvider containerLabel={"알림"} visibleToasts={3} />
      <Button
        variant="solid"
        tone="secondary"
        onClick={() =>
          showToast({
            title: settings.title,
            leadingIcon: settings.showIcon ? (
              <Icon icon={CircleCheck} size="md" decorative />
            ) : undefined,
            description: (
              <span style={{ whiteSpace: 'pre-wrap' }}>
                {settings.description}
              </span>
            ),
            duration: 5000,
            closeLabel: "알림 닫기",
          })
        }
      >
        open
      </Button>
      <Button variant="outline" tone="secondary" onClick={() => dismissToast()}>
        close
      </Button>
    </>
  );
}