import { Title, Meta, Subtitle, Description, Canvas, Controls, Source, Story, } from '@storybook/addon-docs/blocks' import * as PlatformAdStories from './PlatformAd.stories' import { LifecycleTag } from '../../docs/components/LifecycleTag' PlatformAd A succinct message displayed temporarily. A PlatformAd is an ephemeral message that appears briefly in the corner of the screen to inform users about specific events or actions. For example, when a file upload completes successfully, you can display a{' '} PlatformAd with a message and an optional action link.
## Usage ### Import and Place the Toaster The `Toaster` component is required to display the **PlatformAd** notifications. It is powered by [Sonner](https://sonner.dev/), a modern toast notification library. #### **Add the Toaster to Your Layout** ```tsx import { Toaster } from '@chainlink/blocks' export default function RootLayout({ children }) { return (
{children}
{/* Ensure Toaster is rendered at the top level */} ) } ``` ### Triggering a PlatformAd To display a PlatformAd, use the platformAd function. Basic Example ```tsx 'use client' import React from 'react' import { platformAd } from '@chainlink/blocks' import { ReactComponent as WarningIcon } from '@/icons/Warning.svg' export function AnotherComponent() { const handleShowAd = () => { platformAd({ description: 'Heads up: Something important happened!', icon: WarningIcon, }) } return } ``` ## `platformAd` function Props - **`description`** (`React.ReactNode`) – The text message shown in the ad. - **`link`** (`{ href: string, text: string }`) – Controls the clickable link of the ad. - **`icon`** (`React.ElementType`) – Optional icon component. Defaults to `ProductsIcon`.