sayakpaul/stem-separator

1import { useState } from "react";2 3interface SourceUrlFormProps {4  onSubmit: (url: string) => Promise<void> | void;5  disabled?: boolean;6}7 8export function SourceUrlForm({ onSubmit, disabled }: SourceUrlFormProps) {9  const [url, setUrl] = useState("");10 11  return (12    <form13      className="space-y-4 rounded-xl border border-border bg-bg-card p-4 md:p-5"14      onSubmit={async (event) => {15        event.preventDefault();16        if (!url.trim()) return;17        await onSubmit(url.trim());18      }}19    >20      <div className="space-y-1">21        <label22          htmlFor="source-url"23          className="block text-sm font-medium text-text-primary"24        >25          Paste a track link26        </label>27        <p className="text-sm text-text-secondary">28          Supports single YouTube videos, YouTube Music tracks, and Spotify29          track links.30        </p>31      </div>32 33      <input34        id="source-url"35        type="url"36        value={url}37        onChange={(event) => setUrl(event.target.value)}38        placeholder="https://www.youtube.com/watch?v=..."39        disabled={disabled}40        className="w-full rounded-xl border border-border bg-bg-primary px-4 py-3 text-sm text-text-primary outline-none transition-colors placeholder:text-text-secondary focus:border-accent disabled:opacity-50"41      />42 43      <button44        type="submit"45        disabled={disabled || !url.trim()}46        className="w-full rounded-xl bg-accent px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-accent-hover disabled:cursor-not-allowed disabled:opacity-50"47      >48        Fetch track49      </button>50    </form>51  );52}53