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

0% Statements 0/87
0% Branches 0/1
0% Functions 0/1
0% Lines 0/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
    88

     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>
        </>
      )
    }