| import { Link2 } from "lucide-react"; |
|
|
| interface LinkInjectionProps { |
| value: string; |
| onChange: (val: string) => void; |
| disabled?: boolean; |
| } |
|
|
| export function LinkInjection({ value, onChange, disabled }: LinkInjectionProps) { |
| return ( |
| <div className="group"> |
| <label className="block font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground mb-3 pl-1"> |
| Reference Injection (Optional) |
| </label> |
| |
| <div className="flex items-center gap-4 border-b border-border group-focus-within:border-primary transition-colors pb-2"> |
| <Link2 className="w-5 h-5 text-muted-foreground group-focus-within:text-primary transition-colors" /> |
| <input |
| type="text" |
| value={value} |
| onChange={(e) => onChange(e.target.value)} |
| disabled={disabled} |
| placeholder="PASTE REFERENCE ARTIST OR CONTEXT..." |
| className="flex-1 bg-transparent py-2 font-mono text-sm text-primary placeholder:text-muted/40 focus:outline-none disabled:opacity-50" |
| /> |
| </div> |
| |
| <div className="mt-2 pl-1 h-4"> |
| {value && ( |
| <span className="font-mono text-[9px] text-green-600 tracking-widest uppercase animate-pulse"> |
| Data Stream Detected |
| </span> |
| )} |
| </div> |
| </div> |
| ); |
| } |
|
|
