Confirm Hold Button

import { ButtonConfirmHold } from '@/components/ui/button-confirm-hold'

'use client'

import { useState } from 'react'
import { ButtonConfirmHold } from '@/components/ui/button-confirm-hold'

export default function ButtonConfirmHoldDemo() {
  const [deleted, setDeleted] = useState(false)
  const [revoked, setRevoked] = useState(false)

  return (
    <div className="mx-auto flex min-h-[380px] max-w-lg flex-col items-center justify-center gap-10 px-6 py-16">
      <div className="w-full max-w-sm space-y-3 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Workspace · Northwind Analytics
        </p>
        <p className="text-sm leading-relaxed text-muted-foreground">
          {deleted
            ? 'Workspace queued for permanent deletion. Billing stops at cycle end.'
            : 'This removes all dashboards, API keys, and audit history for the workspace.'}
        </p>
        <div className="flex justify-center pt-2">
          {deleted ? (
            <span className="inline-flex h-11 items-center rounded-lg border border-border/60 px-5 text-sm font-medium text-muted-foreground">
              Deletion scheduled
            </span>
          ) : (
            <ButtonConfirmHold onConfirm={() => setDeleted(true)}>
              Delete workspace
            </ButtonConfirmHold>
          )}
        </div>
      </div>

      <div className="w-full max-w-sm space-y-3 border-t border-border/60 pt-10 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Session · deploy token
        </p>
        <div className="flex justify-center pt-1">
          {revoked ? (
            <span className="inline-flex h-11 items-center rounded-lg border border-border/60 px-5 text-sm font-medium text-muted-foreground">
              Token revoked
            </span>
          ) : (
            <ButtonConfirmHold
              holdMs={1000}
              hint="Hold to revoke"
              onConfirm={() => setRevoked(true)}
            >
              Revoke deploy token
            </ButtonConfirmHold>
          )}
        </div>
      </div>
    </div>
  )
}