Undo Window Button

import { ButtonUndoWindow } from '@/components/ui/button-undo-window'

'use client'

import { useState } from 'react'
import { ButtonUndoWindow } from '@/components/ui/button-undo-window'

export default function ButtonUndoWindowDemo() {
  const [archiveNote, setArchiveNote] = useState(
    'Northwind Q2 board pack stays in Active projects until you archive it.'
  )
  const [revokeNote, setRevokeNote] = useState(
    'Staging deploy token last used 14 minutes ago from build runner #7.'
  )

  return (
    <div className="mx-auto flex min-h-[380px] max-w-lg flex-col items-center justify-center gap-12 px-6 py-16">
      <div className="flex w-full flex-col items-center gap-3 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Projects · archive
        </p>
        <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">{archiveNote}</p>
        <ButtonUndoWindow
          onCommit={() =>
            setArchiveNote('Archived, restored to the archive drawer, not deleted.')
          }
          onUndo={() =>
            setArchiveNote('Archive cancelled, Northwind Q2 stays in Active projects.')
          }
          committedLabel="Archived"
        >
          Archive project
        </ButtonUndoWindow>
      </div>

      <div className="flex w-full flex-col items-center gap-3 border-t border-border/60 pt-10 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Security · revoke token
        </p>
        <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">{revokeNote}</p>
        <ButtonUndoWindow
          windowMs={4000}
          undoLabel="Undo"
          committedLabel="Revoked"
          onCommit={() =>
            setRevokeNote('Token revoked, runners will fail authentication on next job.')
          }
          onUndo={() =>
            setRevokeNote('Revoke cancelled, staging deploy token remains valid.')
          }
        >
          Revoke deploy token
        </ButtonUndoWindow>
      </div>
    </div>
  )
}