"use client";
import { useEffect, useState } from "react";
import { Search, X } from "lucide-react";
import { SearchBox } from "@/components/layout/search-box";
/**
* Full-screen search overlay.
*
* Extracted from the floating nav so the homepage header can offer the same
* search affordance without duplicating the open/close state machine, the
* Escape handling or the `/` shortcut.
*/
export function useSearchSheet() {
const [open, setOpen] = useState(false);
useEffect(() => {
const onKey = (event: KeyboardEvent) => {
const target = event.target as HTMLElement | null;
const typing = target && /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
if (event.key === "/" && !typing) {
event.preventDefault();
setOpen(true);
}
if (event.key === "Escape") setOpen(false);
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);
return { open, openSheet: () => setOpen(true), closeSheet: () => setOpen(false) };
}
export function SearchSheet({ onClose }: { onClose: () => void }) {
return (
);
}
/** The circular trigger used in both the header and the floating nav. */
export function SearchTrigger({
onClick,
className,
variant = "icon",
label = "Search",
}: {
onClick: () => void;
className?: string;
variant?: "icon" | "pill";
label?: string;
}) {
if (variant === "pill") {
return (
);
}
return (
);
}