43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
import { Link2, Loader2 } from "lucide-react"
|
|
|
|
interface Props {
|
|
loading?: boolean
|
|
onSubmit: (url: string) => void
|
|
}
|
|
|
|
export function UrlInput({ loading, onSubmit }: Props) {
|
|
const [url, setUrl] = useState("")
|
|
|
|
return (
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault()
|
|
const trimmed = url.trim()
|
|
if (trimmed) onSubmit(trimmed)
|
|
}}
|
|
className="relative w-full"
|
|
>
|
|
<div className="glass-card flex items-center gap-3 px-5 py-4">
|
|
<Link2 className="h-5 w-5 shrink-0 text-white/40" />
|
|
<input
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
placeholder="粘贴 TikTok 链接，例如 https://www.tiktok.com/@user/video/..."
|
|
className="w-full bg-transparent text-white placeholder:text-white/30 outline-none text-[15px]"
|
|
disabled={loading}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={loading || !url.trim()}
|
|
className="shrink-0 rounded-md bg-white text-black px-4 py-2 text-sm font-medium hover:bg-white/90 disabled:opacity-40 disabled:cursor-not-allowed transition flex items-center gap-2"
|
|
>
|
|
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
|
|
{loading ? "处理中" : "提交"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|