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

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

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