# Code coverage report for src/components/features/snippet-viewer/SnippetViewerHeader.tsx

# All files / src/components/features/snippet-viewer SnippetViewerHeader.tsx

100% Statements 105/105
90.9% Branches 10/11
100% Functions 1/1
100% Lines 105/105

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
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    1061x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    2x
    2x
    2x
    2x
    2x
    2x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
    61x
     "use client"

    import { Button } from '@/components/ui/button'
    import { Badge } from '@/components/ui/badge'
    import { DialogTitle } from '@/components/ui/dialog'
    import { Copy, Pencil, Check, SplitVertical } from '@phosphor-icons/react'
    import { Snippet } from '@/lib/types'
    import { cn } from '@/lib/utils'
    import { strings, LANGUAGE_COLORS } from '@/lib/config'

    interface SnippetViewerHeaderProps {
      snippet: Snippet
      isCopied: boolean
      canPreview: boolean
      showPreview: boolean
      onCopy: () => void
      onEdit: () => void
      onTogglePreview: () => void
    }

    export function SnippetViewerHeader({
      snippet,
      isCopied,
      canPreview,
      showPreview,
      onCopy,
      onEdit,
      onTogglePreview,
    }: SnippetViewerHeaderProps) {
      return (
        <div className="flex items-start justify-between gap-4">
          <div className="flex-1 min-w-0 space-y-2">
            <div className="flex items-center gap-3">
              <DialogTitle className="text-2xl font-bold truncate">
                {snippet.title}
              </DialogTitle>
              <Badge
                variant="outline"
                className={cn(
                  "shrink-0 border font-medium text-xs px-2 py-1",
                  LANGUAGE_COLORS[snippet.language] || LANGUAGE_COLORS['Other']
                )}
              >
                {snippet.language}
              </Badge>
            </div>
            {snippet.description && (
              <p className="text-sm text-muted-foreground">
                {snippet.description}
              </p>
            )}
            <p className="text-xs text-muted-foreground">
              {strings.snippetViewer.lastUpdated}: {new Date(snippet.updatedAt).toLocaleString()}
            </p>
          </div>
          <div className="flex gap-2 shrink-0">
            {canPreview && (
              <Button
                variant={showPreview ? "filled" : "outline"}
                size="sm"
                onClick={onTogglePreview}
                className="gap-2"
                data-testid="snippet-viewer-toggle-preview-btn"
                aria-pressed={showPreview}
                aria-label={showPreview ? "Hide preview" : "Show preview"}
              >
                <SplitVertical className="h-4 w-4" aria-hidden="true" />
                {showPreview ? strings.snippetViewer.buttons.hidePreview : strings.snippetViewer.buttons.showPreview}
              </Button>
            )}
            <Button
              variant="outline"
              size="sm"
              onClick={onCopy}
              className="gap-2"
              data-testid="snippet-viewer-copy-btn"
              aria-label={isCopied ? "Code copied to clipboard" : "Copy code to clipboard"}
            >
              {isCopied ? (
                <>
                  <Check className="h-4 w-4" weight="bold" aria-hidden="true" />
                  {strings.snippetViewer.buttons.copied}
                </>
              ) : (
                <>
                  <Copy className="h-4 w-4" aria-hidden="true" />
                  {strings.snippetViewer.buttons.copy}
                </>
              )}
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={onEdit}
              className="gap-2"
              data-testid="snippet-viewer-edit-btn"
              aria-label="Edit snippet"
            >
              <Pencil className="h-4 w-4" aria-hidden="true" />
              {strings.snippetViewer.buttons.edit}
            </Button>
          </div>
        </div>
      )
    }