Changelog Toast

import { BannerChangelogToast } from '@/components/ui/banner-changelog-toast'

'use client'

import { useState } from 'react'
import { BannerChangelogToast } from '@/components/ui/banner-changelog-toast'

export default function BannerChangelogToastDemo() {
  const [key, setKey] = useState(0)

  return (
    <div className="relative flex min-h-[360px] items-end justify-center px-4 py-10 sm:px-6">
      {/* in-flow so the preview frame owns the layout */}
      <BannerChangelogToast
        key={key}
        version="v2.14.0"
        note="Dark theme contrast pass, 12 new blocks, and quieter focus outlines on graphite."
        link={{ label: 'View changelog', href: '#' }}
        delay={0.6}
        docked={false}
        onDismiss={() => {
          window.setTimeout(() => setKey((k) => k + 1), 400)
        }}
      />
    </div>
  )
}