# All files / src/components/features/snippet-display SnippetCardHeader.tsx

100% Statements 60/60
50% Branches 1/2
50% Functions 1/2
100% Lines 60/60

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
    611x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
    8x
     import { Badge } from '@/components/ui/badge'
    import { Checkbox } from '@/components/ui/checkbox'
    import { Snippet } from '@/lib/types'
    import { LANGUAGE_COLORS } from '@/lib/config'

    interface SnippetCardHeaderProps {
      snippet: Snippet
      description: string
      selectionMode: boolean
      isSelected: boolean
      onToggleSelect: () => void
    }

    export function SnippetCardHeader({
      snippet,
      description,
      selectionMode,
      isSelected,
      onToggleSelect
    }: SnippetCardHeaderProps) {
      return (
        <div className="flex items-start justify-between gap-3">
          <div className="flex items-start gap-3 flex-1 min-w-0">
            {selectionMode && (
              <Checkbox
                checked={isSelected}
                onCheckedChange={onToggleSelect}
                onClick={(e) => e.stopPropagation()}
                className="mt-1"
                data-testid={`snippet-select-checkbox-${snippet.id}`}
                aria-label={`Select snippet: ${snippet.title}`}
              />
            )}
            <div className="flex-1 min-w-0">
              <h3
                className="text-lg font-semibold text-foreground mb-1 truncate"
                data-testid={`snippet-title-${snippet.id}`}
              >
                {snippet.title}
              </h3>
              {description && (
                <p
                  className="text-sm text-muted-foreground line-clamp-2"
                  data-testid={`snippet-description-${snippet.id}`}
                >
                  {description}
                </p>
              )}
            </div>
          </div>
          <Badge
            className={`shrink-0 ${LANGUAGE_COLORS[snippet.language] || LANGUAGE_COLORS['Other']}`}
            data-testid={`snippet-language-badge-${snippet.id}`}
            aria-label={`Language: ${snippet.language}`}
          >
            {snippet.language}
          </Badge>
        </div>
      )
    }