All files / web/src/components/practice InlineConfirmation.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { css } from '../../../styled-system/css'

interface InlineConfirmationProps {
  /** Warning message to display */
  message: string
  /** Called when user confirms the action */
  onConfirm: () => void
  /** Called when user cancels */
  onCancel: () => void
  /** Whether the mutation is in progress */
  isPending: boolean
  /** Dark mode */
  isDark: boolean
  /** Compact sizing */
  compact?: boolean
}

/**
 * InlineConfirmation — lightweight confirmation strip that replaces a row's content.
 * No modal overlay; keeps context visible.
 */
export function InlineConfirmation({
  message,
  onConfirm,
  onCancel,
  isPending,
  isDark,
  compact = false,
}: InlineConfirmationProps) {
  return (
    <div
      data-element="inline-confirmation"
      className={css({
        display: 'flex',
        alignItems: 'center',
        gap: compact ? '8px' : '10px',
        padding: compact ? '6px 8px' : '8px 10px',
        borderRadius: '6px',
        backgroundColor: isDark ? 'red.900/30' : 'red.50',
        border: '1px solid',
        borderColor: isDark ? 'red.800' : 'red.200',
        animation: 'fadeIn 0.15s ease-out',
      })}
    >
      <span
        className={css({
          flex: 1,
          fontSize: compact ? '0.75rem' : '0.8125rem',
          color: isDark ? 'red.200' : 'red.800',
          lineHeight: '1.3',
        })}
      >
        {message}
      </span>

      <div className={css({ display: 'flex', gap: '6px', flexShrink: 0 })}>
        <button
          type="button"
          data-action="cancel-confirmation"
          onClick={onCancel}
          disabled={isPending}
          className={css({
            padding: compact ? '3px 8px' : '4px 10px',
            borderRadius: '4px',
            border: '1px solid',
            borderColor: isDark ? 'gray.600' : 'gray.300',
            backgroundColor: 'transparent',
            color: isDark ? 'gray.300' : 'gray.600',
            fontSize: compact ? '0.6875rem' : '0.75rem',
            cursor: 'pointer',
            _hover: { backgroundColor: isDark ? 'gray.700' : 'gray.100' },
            _disabled: { opacity: 0.5, cursor: 'not-allowed' },
          })}
        >
          Cancel
        </button>

        <button
          type="button"
          data-action="confirm-action"
          onClick={onConfirm}
          disabled={isPending}
          className={css({
            padding: compact ? '3px 8px' : '4px 10px',
            borderRadius: '4px',
            border: 'none',
            backgroundColor: isDark ? 'red.700' : 'red.600',
            color: 'white',
            fontSize: compact ? '0.6875rem' : '0.75rem',
            fontWeight: 'medium',
            cursor: 'pointer',
            _hover: { backgroundColor: isDark ? 'red.600' : 'red.700' },
            _disabled: { opacity: 0.5, cursor: 'not-allowed' },
          })}
        >
          {isPending ? 'Removing...' : 'Remove'}
        </button>
      </div>
    </div>
  )
}