Update Prompt Banner

import { BannerUpdatePrompt } from '@/components/blocks/banner-update-prompt'

'use client'

import { useState } from 'react'
import { BannerUpdatePrompt } from '@/components/blocks/banner-update-prompt'

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

  const remount = () => {
    window.setTimeout(() => setKey((k) => k + 1), 400)
  }

  return (
    <div className="flex min-h-[200px] flex-col justify-start py-8">
      <BannerUpdatePrompt
        key={key}
        version="v2.15.0"
        message="A new version of Ledger is available."
        refreshLabel="Refresh"
        laterLabel="Later"
        onRefresh={remount}
        onLater={remount}
      />

      <div className="mx-auto w-full max-w-6xl px-4 pt-8 sm:px-6">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Workspace
        </p>
        <h2 className="mt-2 font-sans text-lg font-semibold tracking-tight text-foreground">
          Shared pens stay open while you refresh
        </h2>
        <p className="mt-1.5 max-w-lg text-sm leading-relaxed text-muted-foreground">
          Choose Refresh to load v2.15.0, or Later to keep drafting. The banner
          collapses so the layout below does not jump.
        </p>
      </div>
    </div>
  )
}