All files / web/src/components/admin AudioClipActions.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

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

interface AudioClipActionsProps {
  clipId: string
  isFlagged: boolean
  onToggleFlag: (clipId: string) => void
  onRegenerate: (clipId: string) => void
  isRegenerating: boolean
  compact?: boolean
}

export function AudioClipActions({
  clipId,
  isFlagged,
  onToggleFlag,
  onRegenerate,
  isRegenerating,
  compact = false,
}: AudioClipActionsProps) {
  const size = compact
    ? { fontSize: '11px', padding: '2px 8px' }
    : { fontSize: '13px', padding: '6px 12px' }

  return (
    <div
      data-component="AudioClipActions"
      className={css({
        display: 'flex',
        alignItems: 'center',
        gap: compact ? '4px' : '8px',
      })}
    >
      <button
        data-action="toggle-flag"
        onClick={() => onToggleFlag(clipId)}
        className={css({
          border: '1px solid #f85149',
          borderRadius: '6px',
          fontWeight: '600',
          cursor: 'pointer',
          backgroundColor: isFlagged ? '#f85149' : 'transparent',
          color: isFlagged ? '#fff' : '#f85149',
          '&:hover': { backgroundColor: isFlagged ? '#da3633' : '#f8514922' },
          ...size,
        })}
      >
        {isFlagged ? 'Unflag' : 'Flag'}
      </button>
      <button
        data-action="regenerate-clip"
        onClick={() => onRegenerate(clipId)}
        disabled={isRegenerating}
        className={css({
          border: 'none',
          borderRadius: '6px',
          fontWeight: '600',
          cursor: 'pointer',
          backgroundColor: '#238636',
          color: '#fff',
          '&:hover': { backgroundColor: '#2ea043' },
          '&:disabled': { opacity: 0.5, cursor: 'not-allowed' },
          ...size,
        })}
      >
        {compact ? 'Regen' : 'Regenerate'}
      </button>
    </div>
  )
}