82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
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>
|
|
)
|
|
} |