File size: 2,096 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | "use client";
import { useState } from "react";
import { Search, Video } from "lucide-react";
export function VideoPluginTab() {
const [videoQuery, setVideoQuery] = useState("");
const [searched, setSearched] = useState(false);
function handleSearch() {
if (!videoQuery.trim()) return;
setSearched(true);
}
return (
<div className="space-y-3">
<div className="flex gap-2">
<div className="relative flex-1">
<label htmlFor="video-search-input" className="sr-only">Search videos</label>
<input
id="video-search-input"
type="text"
value={videoQuery}
onChange={(e) => setVideoQuery(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
placeholder="Search topics or chapters..."
className="w-full rounded-xl border border-white/[0.1] bg-white/[0.04] px-3 py-2 pl-9 text-sm text-white outline-none placeholder:text-white/34 focus:border-white/[0.22]"
/>
<Search className="pointer-events-none absolute left-3 top-1/2 size-3.5 -translate-y-1/2 text-white/34" />
</div>
<button
type="button"
onClick={handleSearch}
className="inline-flex shrink-0 items-center gap-2 rounded-xl border border-white/[0.1] bg-white/[0.04] px-3 text-xs font-semibold text-white/64 transition hover:border-white/[0.18] hover:text-white"
>
Search
</button>
</div>
<div className="rounded-2xl border border-dashed border-white/[0.08] px-4 py-8 text-center">
<Video className="mx-auto size-8 text-white/24" />
<p className="mt-3 text-sm font-semibold text-white/48">Video search isn't available yet</p>
<p className="mt-1 text-xs text-white/34">
{searched
? "Search isn't available yet. Open a chapter to find its lesson video where available, notes and practice."
: "Open a chapter to find its lesson video where available, notes and practice."}
</p>
</div>
</div>
);
}
|