39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import {
|
|
Button,
|
|
Label,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarInput,
|
|
SidebarMenu,
|
|
SidebarMenuItem,
|
|
} from "@repo/shadcn-ui/components";
|
|
import { BinocularsIcon, SearchIcon } from "lucide-react";
|
|
|
|
export function SearchForm({ ...props }: React.ComponentProps<"form">) {
|
|
return (
|
|
<form {...props}>
|
|
<SidebarGroup className="py-0">
|
|
<SidebarGroupContent className="relative">
|
|
<SidebarMenu>
|
|
<SidebarMenuItem className="flex items-center gap-2">
|
|
<Label className="sr-only" htmlFor="search">
|
|
Searchsss
|
|
</Label>
|
|
<SidebarInput className="pl-8 h-9" id="search" placeholder="Search..." />
|
|
<SearchIcon className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none " />
|
|
<Button
|
|
className="h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0"
|
|
size="icon"
|
|
variant="outline"
|
|
>
|
|
<BinocularsIcon />
|
|
<span className="sr-only">Advanced search</span>
|
|
</Button>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</form>
|
|
);
|
|
}
|