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

100% Statements 87/87
100% Branches 8/8
100% Functions 3/3
100% Lines 87/87

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
    881x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
    36x
     import { Label } from '@/components/ui/label'
    import { Input } from '@/components/ui/input'
    import {
      Select,
      SelectContent,
      SelectItem,
      SelectTrigger,
      SelectValue,
    } from '@/components/ui/select'
    import { Textarea } from '@/components/ui/textarea'
    import { LANGUAGES } from '@/lib/config'

    interface SnippetFormFieldsProps {
      title: string
      description: string
      language: string
      errors: { title?: string; code?: string }
      onTitleChange: (value: string) => void
      onDescriptionChange: (value: string) => void
      onLanguageChange: (value: string) => void
    }

    export function SnippetFormFields({
      title,
      description,
      language,
      errors,
      onTitleChange,
      onDescriptionChange,
      onLanguageChange,
    }: SnippetFormFieldsProps) {
      return (
        <>
          <div className="space-y-2">
            <Label htmlFor="title">Title *</Label>
            <Input
              id="title"
              placeholder="e.g., React Counter Component"
              value={title}
              onChange={(e) => onTitleChange(e.target.value)}
              className={errors.title ? 'border-destructive ring-destructive' : ''}
              data-testid="snippet-title-input"
              aria-invalid={!!errors.title}
              aria-describedby={errors.title ? "title-error" : undefined}
            />
            {errors.title && (
              <p className="text-sm text-destructive" id="title-error">
                {errors.title}
              </p>
            )}
          </div>

          <div className="space-y-2">
            <Label htmlFor="language">Language</Label>
            <Select value={language} onValueChange={onLanguageChange}>
              <SelectTrigger
                id="language"
                data-testid="snippet-language-select"
                aria-label="Select programming language"
              >
                <SelectValue />
              </SelectTrigger>
              <SelectContent data-testid="snippet-language-options">
                {LANGUAGES.map((lang) => (
                  <SelectItem key={lang} value={lang} data-testid={`language-option-${lang}`}>
                    {lang}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="description">Description</Label>
            <Textarea
              id="description"
              placeholder="A brief description of your snippet"
              value={description}
              onChange={(e) => onDescriptionChange(e.target.value)}
              rows={2}
              data-testid="snippet-description-textarea"
              aria-label="Snippet description"
            />
          </div>
        </>
      )
    }