git/snippet-pastebin
1
0
Fork 0
mirror of https://github.com/johndoe6345789/snippet-pastebin.git synced 2026-04-24 13:34:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Edited Spark

Browse Source
This commit is contained in:
johndoe6345789
2026-01-17 16:33:10 +00:00
committed by GitHub
parent ec81ce8e17
commit 812aa471b6
1 changed files with 162 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/components/ComponentShowcase.tsx
View File

@@ -1,88 +1,162 @@
import { useState } from 'react'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { FloppyDisk } from '@phosphor-icons/react'
import { SnippetDialog } from '@/components/SnippetDialog'
import { Snippet } from '@/lib/types'
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,
}}
/>
)}
</>
)
}
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'
interface ComponentShowcaseProps {
description?: string
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,
}}
/>
)}
</>
)
}
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,
}}
/>
)}
</>
)
}