Generated by Spark: Make atomic component library until done. If done, just wire them into other components.

src/components/SnippetCard.tsx

@@ -3,8 +3,8 @@ import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Copy, Pencil, Trash, Eye } from '@phosphor-icons/react'
-import { Snippet, LANGUAGE_COLORS } from '@/lib/types'
-import { strings, appConfig } from '@/lib/config'
+import { Snippet } from '@/lib/types'
+import { strings, appConfig, LANGUAGE_COLORS } from '@/lib/config'
 
 interface SnippetCardProps {
   snippet: Snippet

src/components/SnippetDialog.tsx

@@ -19,9 +19,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { Snippet, LANGUAGES } from '@/lib/types'
+import { Snippet } from '@/lib/types'
 import { MonacoEditor } from '@/components/MonacoEditor'
-import { strings, appConfig } from '@/lib/config'
+import { strings, appConfig, LANGUAGES } from '@/lib/config'
 
 interface SnippetDialogProps {
   open: boolean
@@ -75,6 +75,7 @@ export function SnippetDialog({ open, onOpenChange, onSave, editingSnippet }: Sn
       description: description.trim(),
       language,
       code: code.trim(),
+      category: editingSnippet?.category || 'general',
       hasPreview,
     })
 

src/components/SnippetViewer.tsx

@@ -7,12 +7,12 @@ import {
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Copy, Pencil, X, Check, SplitVertical } from '@phosphor-icons/react'
-import { Snippet, LANGUAGE_COLORS } from '@/lib/types'
+import { Snippet } from '@/lib/types'
 import { MonacoEditor } from '@/components/MonacoEditor'
 import { ReactPreview } from '@/components/ReactPreview'
 import { cn } from '@/lib/utils'
 import { useState } from 'react'
-import { strings, appConfig } from '@/lib/config'
+import { strings, appConfig, LANGUAGE_COLORS } from '@/lib/config'
 
 interface SnippetViewerProps {
   snippet: Snippet | null

src/lib/types.ts

@@ -1,36 +1,17 @@
-export type AtomicLevel = 'atoms' | 'molecules' | 'organisms' | 'templates'
-
-  name: string
-  category: 
-}
-export interface Snip
-  title: string
-  language: string
- 
-
-
-  'JavaScrip
-  'JSX',
-  'Python',
-  'C++',
-  'Ruby',
-  hasPreview?: boolean
-  createdAt: number
-  updatedAt: number
+export type AtomicLevel = 'atoms' | 'molecules' | 'organisms' | 'templates'
+
+export interface Snippet {
+  id: string
+  title: string
+  description: string
+  code: string
+  language: string
+  category: string
+  hasPreview?: boolean
+  createdAt: number
+  updatedAt: number
 }
 
-export const LANGUAGES = [
-  'JavaScript',
-  'TypeScript',
-  'JSX',
-  'TSX',
-  'Python',
-  'Java',
-  'C++',
-  'C#',
-  'Ruby',
-  'Go',
-