practice AudioHelpButton.tsx

0% Statements 0/43

0% Branches 0/1

0% Functions 0/1

0% Lines 0/43

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import { Volume2 } from 'lucide-react'
import { css } from '../../../styled-system/css'

interface AudioHelpButtonProps {
  onReplay: () => void
  isPlaying: boolean
}

export function AudioHelpButton({ onReplay, isPlaying }: AudioHelpButtonProps) {
  return (
    <button
      type="button"
      data-component="audio-help-button"
      data-action="replay-audio"
      onClick={onReplay}
      disabled={isPlaying}
      aria-label="Replay problem audio"
      className={css({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '36px',
        height: '36px',
        borderRadius: '50%',
        border: '1px solid',
        borderColor: 'gray.300',
        backgroundColor: 'transparent',
        cursor: 'pointer',
        color: 'gray.600',
        transition: 'all 0.15s',
        opacity: isPlaying ? 0.5 : 1,
        _hover: {
          backgroundColor: 'gray.100',
          borderColor: 'gray.400',
        },
      })}
    >
      <Volume2 size={18} />
    </button>
  )
}