Spaces:
Sleeping
Sleeping
File size: 4,478 Bytes
f871fed |
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 107 108 109 110 111 112 113 114 115 116 117 118 |
'use client'
import { useState } from 'react'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ConfirmDialog } from '@/components/common/ConfirmDialog'
import { Badge } from '@/components/ui/badge'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { ChevronDown, ChevronRight, Trash2, Wand2, Edit } from 'lucide-react'
import { Transformation } from '@/lib/types/transformations'
import { useDeleteTransformation } from '@/lib/hooks/use-transformations'
import { cn } from '@/lib/utils'
interface TransformationCardProps {
transformation: Transformation
onPlayground?: () => void
onEdit?: () => void
}
export function TransformationCard({ transformation, onPlayground, onEdit }: TransformationCardProps) {
const [isExpanded, setIsExpanded] = useState(false)
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
const deleteTransformation = useDeleteTransformation()
const handleDelete = () => {
deleteTransformation.mutate(transformation.id)
setShowDeleteDialog(false)
}
return (
<>
<Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
<Card>
<CardHeader>
<div className="flex items-start justify-between gap-4">
<CollapsibleTrigger className="flex-1 text-left">
<div className={cn('flex items-center gap-3', isExpanded ? 'mb-2' : '')}>
{isExpanded ? (
<ChevronDown className="h-5 w-5" />
) : (
<ChevronRight className="h-5 w-5" />
)}
<div className="flex flex-col">
<span className="font-semibold">{transformation.name}</span>
{!isExpanded && transformation.description && (
<span className="text-sm text-muted-foreground">{transformation.description}</span>
)}
</div>
{transformation.apply_default && (
<Badge variant="secondary">default</Badge>
)}
</div>
</CollapsibleTrigger>
<div className="flex items-center gap-2">
{onPlayground && (
<Button variant="outline" size="sm" onClick={onPlayground}>
<Wand2 className="h-4 w-4 mr-2" />
Playground
</Button>
)}
{onEdit && (
<Button variant="outline" size="sm" onClick={onEdit}>
<Edit className="h-4 w-4 mr-2" />
Edit
</Button>
)}
<Button
variant="ghost"
size="sm"
className="text-red-600 hover:text-red-700"
onClick={() => setShowDeleteDialog(true)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
</CardHeader>
<CollapsibleContent>
<CardContent className="space-y-4">
<div>
<p className="text-sm text-muted-foreground">Title</p>
<p className="text-sm font-medium">{transformation.title || 'Untitled'}</p>
</div>
{transformation.description && (
<div>
<p className="text-sm text-muted-foreground">Description</p>
<p className="text-sm leading-6">{transformation.description}</p>
</div>
)}
<div>
<p className="text-sm text-muted-foreground">Prompt</p>
<pre className="mt-2 whitespace-pre-wrap rounded-md bg-muted p-3 text-sm font-mono">
{transformation.prompt}
</pre>
</div>
</CardContent>
</CollapsibleContent>
</Card>
</Collapsible>
<ConfirmDialog
open={showDeleteDialog}
onOpenChange={setShowDeleteDialog}
title="Delete Transformation"
description={`Are you sure you want to delete "${transformation.name}"? This action cannot be undone.`}
confirmText="Delete"
confirmVariant="destructive"
onConfirm={handleDelete}
isLoading={deleteTransformation.isPending}
/>
</>
)
}
|