Hotkey Button

import { ButtonHotkey } from '@/components/ui/button-hotkey'

'use client'

import { useState } from 'react'
import { ButtonHotkey } from '@/components/ui/button-hotkey'

export default function ButtonHotkeyDemo() {
  const [log, setLog] = useState<string[]>([])

  const push = (msg: string) => {
    setLog((prev) => [msg, ...prev].slice(0, 4))
  }

  return (
    <div className="mx-auto flex min-h-[360px] max-w-lg flex-col items-center justify-center gap-10 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">
          Ledger · command palette
        </p>
        <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">
          Open the global search for invoices, vendors, and audit trails, same binding
          as the app chrome.
        </p>
        <ButtonHotkey keys="mod+k" onAction={() => push('Opened search')} variant="outline">
          Search ledger
        </ButtonHotkey>
      </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">
          Draft · quick save
        </p>
        <div className="flex flex-wrap items-center justify-center gap-3">
          <ButtonHotkey
            keys="mod+s"
            onAction={() => push('Draft saved')}
            variant="primary"
            size="sm"
          >
            Save draft
          </ButtonHotkey>
          <ButtonHotkey
            keys="shift+d"
            onAction={() => push('Duplicated line')}
            variant="ghost"
            size="sm"
          >
            Duplicate row
          </ButtonHotkey>
        </div>
      </div>

      {log.length > 0 && (
        <ul className="w-full max-w-xs space-y-1.5 border-t border-border/60 pt-8 font-mono text-[11px] text-muted-foreground">
          {log.map((entry, i) => (
            <li key={`${entry}-${i}`} className="tabular-nums">
              {entry}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}