# All files / src/components/features/snippet-editor CodeEditorSection.tsx

0% Statements 0/88
0% Branches 0/1
0% Functions 0/1
0% Lines 0/88

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
    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

     'use client'

    import { Label } from '@/components/ui/label'
    import { Checkbox } from '@/components/ui/checkbox'
    import { MonacoEditor } from '@/components/features/snippet-editor/MonacoEditor'
    import { SplitScreenEditor } from '@/components/features/snippet-editor/SplitScreenEditor'
    import { InputParameter } from '@/lib/types'
    import { appConfig } from '@/lib/config'

    interface CodeEditorSectionProps {
      code: string
      language: string
      hasPreview: boolean
      functionName: string
      inputParameters: InputParameter[]
      errors: { code?: string }
      onCodeChange: (value: string) => void
      onPreviewChange: (checked: boolean) => void
    }

    export function CodeEditorSection({
      code,
      language,
      hasPreview,
      functionName,
      inputParameters,
      errors,
      onCodeChange,
      onPreviewChange,
    }: CodeEditorSectionProps) {
      const isPreviewSupported = appConfig.previewEnabledLanguages.includes(language)

      return (
        <>
          {isPreviewSupported && (
            <div className="flex items-center space-x-2 py-2">
              <Checkbox
                id="hasPreview"
                checked={hasPreview}
                onCheckedChange={(checked) => onPreviewChange(checked as boolean)}
                data-testid="enable-preview-checkbox"
                aria-label="Enable live preview"
              />
              <Label
                htmlFor="hasPreview"
                className="text-sm font-normal cursor-pointer"
                data-testid="enable-preview-label"
              >
                Enable live preview
              </Label>
            </div>
          )}

          <div className="space-y-2">
            <Label htmlFor="code">Code *</Label>
            {hasPreview && isPreviewSupported ? (
              <div
                className={errors.code ? 'ring-2 ring-destructive/20 rounded-md' : ''}
                data-testid="split-screen-editor-container"
              >
                <SplitScreenEditor
                  value={code}
                  onChange={onCodeChange}
                  language={language}
                  height="500px"
                  functionName={functionName}
                  inputParameters={inputParameters}
                />
              </div>
            ) : (
              <div
                className={`rounded-md border overflow-hidden ${
                  errors.code ? 'border-destructive ring-2 ring-destructive/20' : 'border-border'
                }`}
                data-testid="code-editor-container"
              >
                <MonacoEditor value={code} onChange={onCodeChange} language={language} height="400px" />
              </div>
            )}
            {errors.code && (
              <p className="text-sm text-destructive" id="code-error" data-testid="code-error-message">
                {errors.code}
              </p>
            )}
          </div>
        </>
      )
    }