# All files / src/components/demo ComponentShowcase.tsx

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

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

     import { useState } from 'react'
    import { Card } from '@/components/ui/card'
    import { Button } from '@/components/ui/button'
    import { FloppyDisk } from '@phosphor-icons/react'
    import { Snippet } from '@/lib/types'
    import { SnippetDialog } from '@/components/features/snippet-editor/SnippetDialog'

    interface ComponentShowcaseProps {
      children: React.ReactNode
      code: string
      title: string
      description?: string
      language?: string
      category: string
      onSaveSnippet: (snippet: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => void
    }

    export function ComponentShowcase({
      children,
      code,
      title,
      description = '',
      language = 'tsx',
      category,
      onSaveSnippet,
    }: ComponentShowcaseProps) {
      const [dialogOpen, setDialogOpen] = useState(false)
      const [prefilledData, setPrefilledData] = useState<{
        title: string
        description: string
        code: string
        language: string
        category: string
      } | null>(null)

      const handleSaveClick = () => {
        setPrefilledData({
          title,
          description,
          code,
          language,
          category,
        })
        setDialogOpen(true)
      }

      const handleSave = (snippetData: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => {
        onSaveSnippet(snippetData)
        setDialogOpen(false)
        setPrefilledData(null)
      }

      return (
        <>
          <Card className="relative group">
            <div className="absolute top-4 right-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
              <Button
                variant="secondary"
                size="sm"
                onClick={handleSaveClick}
                className="gap-2 shadow-lg"
              >
                <FloppyDisk weight="bold" />
                Save as Snippet
              </Button>
            </div>
            {children}
          </Card>
          {prefilledData && (
            <SnippetDialog
              open={dialogOpen}
              onOpenChange={setDialogOpen}
              onSave={handleSave}
              editingSnippet={{
                id: '',
                title: prefilledData.title,
                description: prefilledData.description,
                code: prefilledData.code,
                language: prefilledData.language,
                category: prefilledData.category,
                createdAt: 0,
                updatedAt: 0,
              }}
            />
          )}
        </>
      )
    }