7ff493a89a
Implements COMP-139 (command palette), COMP-140 (accessibility), COMP-141 (scroll animations), COMP-145 (keyboard navigation) Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-Claude) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Github, Loader2, ArrowRight } from "lucide-react";
|
|
|
|
const GITHUB_URL_REGEX =
|
|
/^https?:\/\/(www\.)?github\.com\/[\w.-]+\/[\w.-]+\/?$/;
|
|
|
|
export function RepoInput() {
|
|
const [url, setUrl] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const router = useRouter();
|
|
|
|
const isValid = GITHUB_URL_REGEX.test(url);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!isValid) {
|
|
setError("Please enter a valid GitHub repository URL");
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
const response = await fetch("/api/generate", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ repoUrl: url.trim() }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.error || "Failed to start generation");
|
|
}
|
|
|
|
const data = await response.json();
|
|
router.push(`/generate?repo=${encodeURIComponent(url)}&id=${data.id}`);
|
|
} catch (err) {
|
|
setError(
|
|
err instanceof Error ? err.message : "An unexpected error occurred"
|
|
);
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="w-full">
|
|
<div className="relative flex flex-col sm:flex-row gap-3">
|
|
<div className="relative flex-1">
|
|
<label htmlFor="repo-url-input" className="sr-only">
|
|
GitHub repository URL
|
|
</label>
|
|
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500" aria-hidden="true">
|
|
<Github className="w-5 h-5" />
|
|
</div>
|
|
<input
|
|
id="repo-url-input"
|
|
type="text"
|
|
value={url}
|
|
onChange={(e) => {
|
|
setUrl(e.target.value);
|
|
setError(null);
|
|
}}
|
|
placeholder="https://github.com/user/repo"
|
|
className="w-full pl-12 pr-4 py-4 bg-black/40 border border-white/10 rounded-xl text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 transition-all"
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || !url}
|
|
className="flex items-center justify-center gap-2 px-6 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-medium rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed min-w-[160px]"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 className="w-5 h-5 animate-spin" />
|
|
<span>Starting...</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span>Generate Docs</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mt-3 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-3 flex items-center gap-2 text-xs text-zinc-500">
|
|
<div className={`w-2 h-2 rounded-full ${isValid ? "bg-green-500" : "bg-zinc-600"}`} />
|
|
<span>
|
|
{isValid
|
|
? "Valid GitHub URL"
|
|
: "Enter a public GitHub repository URL"}
|
|
</span>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|