#Notification

import { Button, useNotification } from '@ifhover/leaf-ui';

export function NotificationBasic() {
  const notification = useNotification();
  return (
    <Button
      onClick={() =>
        notification.open({
          title: 'Report ready',
          description: 'Your monthly report is ready to download.',
          actions: (
            <Button size="sm" onClick={() => notification.close()}>
              Got it
            </Button>
          ),
        })
      }
    >
      Show notification
    </Button>
  );
}

import { Button, Space, useNotification } from '@ifhover/leaf-ui';

export function NotificationOptions() {
  const notification = useNotification();
  return (
    <Space wrap>
      <Button
        variant="outline"
        onClick={() =>
          notification.success({
            title: 'Saved successfully',
            description: 'All changes were saved.',
            placement: 'bottom-right',
          })
        }
      >
        Success
      </Button>
      <Button
        variant="outline"
        danger
        onClick={() =>
          notification.error({
            key: 'sync',
            title: 'Sync failed',
            description: 'Check your connection and retry.',
            duration: 0,
          })
        }
      >
        Persistent error
      </Button>
      <Button
        variant="ghost"
        onClick={() => notification.open({ key: 'sync', title: 'Syncing again', duration: 2 })}
      >
        Update notification
      </Button>
    </Space>
  );
}