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

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

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