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

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

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

     import { Plus } from '@phosphor-icons/react'
    import { Button } from '@/components/ui/button'
    import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
    import { Input } from '@/components/ui/input'
    import { Label } from '@/components/ui/label'
    import { InputParameter } from '@/lib/types'
    import { InputParameterItem } from './InputParameterItem'

    interface InputParameterListProps {
      inputParameters: InputParameter[]
      functionName: string
      onFunctionNameChange: (name: string) => void
      onAddParameter: () => void
      onRemoveParameter: (index: number) => void
      onUpdateParameter: (index: number, field: keyof InputParameter, value: string) => void
    }

    export function InputParameterList({
      inputParameters,
      functionName,
      onFunctionNameChange,
      onAddParameter,
      onRemoveParameter,
      onUpdateParameter,
    }: InputParameterListProps) {
      return (
        <Card className="bg-muted/30">
          <CardHeader className="pb-3">
            <CardTitle className="text-base font-semibold flex items-center justify-between">
              <span>Preview Configuration</span>
              <Button
                variant="outline"
                size="sm"
                onClick={onAddParameter}
                className="gap-2"
                data-testid="add-parameter-btn"
                aria-label="Add new parameter"
              >
                <Plus className="h-3 w-3" aria-hidden="true" />
                Add Parameter
              </Button>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="functionName" className="text-sm">
                Function/Component Name (Optional)
              </Label>
              <Input
                id="functionName"
                placeholder="e.g., MyComponent"
                value={functionName}
                onChange={(e) => onFunctionNameChange(e.target.value)}
                className="bg-background"
                data-testid="function-name-input"
                aria-label="Function or component name"
                aria-describedby="function-name-help"
              />
              <p className="text-xs text-muted-foreground" id="function-name-help">
                The name of the function or component to render. Leave empty to use the default export.
              </p>
            </div>

            {inputParameters.length > 0 && (
              <div className="space-y-3">
                <Label className="text-sm font-medium">Input Parameters (Props)</Label>
                {inputParameters.map((param, index) => (
                  <InputParameterItem
                    key={index}
                    param={param}
                    index={index}
                    onUpdate={onUpdateParameter}
                    onRemove={onRemoveParameter}
                  />
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      )
    }