import { useState, useEffect, useRef } from "react"; import { Input } from "/components/ui/input"; import { Button } from "/components/ui/button"; import { validateTwitchUrl } from "../utils/validateTwitchUrl"; import { motion, AnimatePresence } from "framer-motion"; interface StreamGatewayProps { onLaunch: (url: string) => void; isLoading: boolean; } export function StreamGateway({ onLaunch, isLoading }: StreamGatewayProps) { const [url, setUrl] = useState(""); const [isValid, setIsValid] = useState(false); const [error, setError] = useState(""); const inputRef = useRef(null); useEffect(() => { inputRef.current?.focus(); }, []); useEffect(() => { const result = validateTwitchUrl(url); setIsValid(result.valid); setError(result.error); }, [url]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (isValid && url) { const formattedUrl = url.startsWith("http") ? url : `https://${url}`; onLaunch(formattedUrl); } }; return (

setUrl(e.target.value.trim())} placeholder="Enter Twitch URL (e.g., twitch.tv/justin)" className={` bg-slate-900/80 border-2 text-slate-100 placeholder-slate-500 text-lg py-6 px-6 rounded-xl transition-all duration-300 ${error ? "border-red-500 shadow-[0_0_20px_rgba(239,68,68,0.3)]" : ""} ${isValid && !error ? "border-emerald-500 shadow-[0_0_20px_rgba(16,185,129,0.3)]" : ""} ${!isValid && !error ? "border-slate-700 hover:border-slate-600" : ""} focus:outline-none `} disabled={isLoading} /> {isValid && !error && (

)}

{error && ( {error} )} {!error && url && isValid && ( Ready to launch )}

); }