← back to ClawCoder

src/components/ui/back-next-bar.tsx

47 lines

'use client'

interface BackNextBarProps {
  onBack?: () => void
  onNext?: () => void
  backLabel?: string
  nextLabel?: string
  backDisabled?: boolean
  nextDisabled?: boolean
  showBack?: boolean
}

export function BackNextBar({
  onBack,
  onNext,
  backLabel = 'Back',
  nextLabel = 'Next',
  backDisabled = false,
  nextDisabled = false,
  showBack = true,
}: BackNextBarProps) {
  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 flex justify-between border-t border-slate-200 bg-white/80 p-4 backdrop-blur">
      {showBack ? (
        <button
          type="button"
          onClick={onBack}
          disabled={backDisabled}
          className="min-h-[56px] rounded-xl border border-slate-300 px-8 py-3 text-base font-medium text-slate-700 transition-colors hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {backLabel}
        </button>
      ) : (
        <div />
      )}
      <button
        type="button"
        onClick={onNext}
        disabled={nextDisabled}
        className="min-h-[56px] rounded-xl bg-blue-600 px-8 py-3 text-base font-medium text-white transition-colors hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
      >
        {nextLabel}
      </button>
    </div>
  )
}