Preview Mode Banner

import { BannerPreviewMode } from '@/components/blocks/banner-preview-mode'

'use client'

import { useState } from 'react'
import { BannerPreviewMode } from '@/components/blocks/banner-preview-mode'

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

  return (
    <div className="relative flex min-h-[320px] flex-col justify-end">
      {/* framed page chrome so the floating pill has something to sit on */}
      <div className="mx-auto w-full max-w-3xl flex-1 px-4 pt-10 sm:px-6">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Field Notes · Draft
        </p>
        <h2 className="mt-3 font-sans text-xl font-semibold tracking-tight text-balance text-foreground sm:text-2xl">
          Autumn harvest guide for community gardens
        </h2>
        <p className="mt-2 max-w-xl text-sm leading-relaxed text-muted-foreground">
          Editors are reviewing soil-test tables and the frost-date map before
          publish. Exit preview to return to the live site.
        </p>
        <div
          aria-hidden="true"
          className="mt-8 h-28 rounded-2xl border border-border/60 bg-muted"
        />
      </div>

      <BannerPreviewMode
        key={key}
        docked={false}
        label="Preview"
        message="Viewing an unpublished draft."
        meta="Saved 2 min ago"
        exitLabel="Exit preview"
        onExit={() => {
          window.setTimeout(() => setKey((k) => k + 1), 400)
        }}
      />
    </div>
  )
}