Generated by Spark: Fix all reported errors.

spark.meta.json

@@ -1,4 +1,4 @@
 {
   "templateVersion": 0,
-  "dbType": null
+  "dbType": "kv"
 }

src/components/SnippetCard.tsx

@@ -2,173 +2,153 @@ import { useState, useMemo } from 'react'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
-import { Copy, Pencil, Trash, Ey
+import { Copy, Pencil, Trash, Eye } from '@phosphor-icons/react'
+import { Snippet, LANGUAGE_COLORS } from '@/lib/types'
 
+interface SnippetCardProps {
   snippet: Snippet
+  onEdit: (snippet: Snippet) => void
+  onDelete: (id: string) => void
+  onCopy: (code: string) => void
+  onView: (snippet: Snippet) => void
+}
 
-  onView: (snippet: Snippet)
-
-  const [isCopied, setIsCopied] = us
+export function SnippetCard({ snippet, onEdit, onDelete, onCopy, onView }: SnippetCardProps) {
+  const [isCopied, setIsCopied] = useState(false)
 
+  const snippetData = useMemo(() => {
     try {
-      const code = snippet?.code || 
- 
+      const code = snippet?.code || ''
+      const description = snippet?.description || ''
+      const maxLength = 150
+      const isTruncated = code.length > maxLength
+      const displayCode = isTruncated ? code.slice(0, maxLength) + '...' : code
 
       return {
         description,
+        displayCode,
         fullCode: code,
-
+        isTruncated,
+        hasPreview: snippet?.hasPreview || false
       }
-      set
-        title: 'Error Loading Snippet',
+    } catch (error) {
+      return {
+        description: '',
         displayCode: '',
+        fullCode: '',
         isTruncated: false,
         hasPreview: false
       }
-
-
-    setIsCopie
     }
-  const handleEdit =
+  }, [snippet])
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onCopy(snippetData.fullCode)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation()
     onEdit(snippet)
-
-    e.stopPropagatio
   }
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onDelete(snippet.id)
+  }
+
   const handleView = (e: React.MouseEvent) => {
-    onV
+    onView(snippet)
+  }
+
+  if (!snippet) {
+    return (
+      <Card className="p-6">
+        <p className="text-muted-foreground">Error loading snippet</p>
+      </Card>
+    )
+  }
 
   return (
-        <p cla
-    )
-
     <Card 
-        'group overfl
-      )}
-      <div className="p-6 
-          <div className=
-       
-     
-               
-
-          <Badge
-            className={
-              LANGUAGE_COLORS[sa
+      className="group overflow-hidden hover:border-accent/50 transition-all cursor-pointer"
+      onClick={handleView}
     >
-          </Badge>
-
-
-          </pre>
-            <p classNam
+      <div className="p-6 space-y-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex-1 min-w-0">
+            <h3 className="text-lg font-semibold text-foreground mb-1 truncate">
+              {snippet.title}
+            </h3>
+            {snippetData.description && (
+              <p className="text-sm text-muted-foreground line-clamp-2">
+                {snippetData.description}
               </p>
-   
-
-        <div className="flex-1 flex items-center 
-            <Button
-              variant="g
-   
-
-            </Button>
-
-            size="s
-   
-
-            <Copy class
-        </di
-        <div className="flex items-center gap-2
-            size="sm"
-            o
-     
-   
-
-          
-         
-            aria-lab
-            <Trash className="h-4 w-4" />
+            )}
           </div>
-    </Ca
+          <Badge
+            className={`shrink-0 ${LANGUAGE_COLORS[snippet.language] || LANGUAGE_COLORS['Other']}`}
+          >
+            {snippet.language}
+          </Badge>
+        </div>
+
+        <div className="rounded-md bg-secondary/30 p-3 border border-border">
+          <pre className="text-xs text-muted-foreground overflow-x-auto whitespace-pre-wrap break-words font-mono">
+            {snippetData.displayCode}
+          </pre>
+          {snippetData.isTruncated && (
+            <p className="text-xs text-accent mt-2">
+              Click to view full code...
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between gap-2 pt-2">
+          <div className="flex-1 flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleView}
+              className="gap-2"
+            >
+              <Eye className="h-4 w-4" />
+              View
+            </Button>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleCopy}
+              className="gap-2"
+              aria-label="Copy code"
+            >
+              <Copy className="h-4 w-4" />
+              {isCopied ? 'Copied!' : 'Copy'}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleEdit}
+              aria-label="Edit snippet"
+            >
+              <Pencil className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDelete}
+              className="text-destructive hover:text-destructive hover:bg-destructive/10"
+              aria-label="Delete snippet"
+            >
+              <Trash className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-