feat: implement extraction management features including creation, loading states, and filtering

src/components/extractions/CreateExtractionDialog.tsx

@@ -0,0 +1,82 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Loader2 } from 'lucide-react'
+
+interface CreateExtractionDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  loading: boolean
+  url: string
+  onUrlChange: (url: string) => void
+  onSubmit: () => void
+  onCancel: () => void
+}
+
+export function CreateExtractionDialog({
+  open,
+  onOpenChange,
+  loading,
+  url,
+  onUrlChange,
+  onSubmit,
+  onCancel,
+}: CreateExtractionDialogProps) {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !loading) {
+      onSubmit()
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Create New Extraction</DialogTitle>
+          <DialogDescription>
+            Extract audio from YouTube, SoundCloud, Vimeo, TikTok, Twitter, 
+            Instagram, and many other platforms.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="url">URL</Label>
+            <Input
+              id="url"
+              placeholder="https://www.youtube.com/watch?v=..."
+              value={url}
+              onChange={e => onUrlChange(e.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+            <p className="text-sm text-muted-foreground mt-1">
+              Paste a link to extract audio from the media
+            </p>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel} disabled={loading}>
+            Cancel
+          </Button>
+          <Button onClick={onSubmit} disabled={loading || !url.trim()}>
+            {loading ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Creating...
+              </>
+            ) : (
+              'Create Extraction'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}