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 htmlFor='search' className='sr-only'>
|
||
|
|
Search
|
||
|
|
</Label>
|
||
|
|
<SidebarInput id='search' placeholder='Search...' className='pl-8 h-9' />
|
||
|
|
<SearchIcon className='pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none ' />
|
||
|
|
<Button
|
||
|
|
size='icon'
|
||
|
|
className='h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0'
|
||
|
|
variant='outline'
|
||
|
|
>
|
||
|
|
<BinocularsIcon />
|
||
|
|
<span className='sr-only'>Advanced search</span>
|
||
|
|
</Button>
|
||
|
|
</SidebarMenuItem>
|
||
|
|
</SidebarMenu>
|
||
|
|
</SidebarGroupContent>
|
||
|
|
</SidebarGroup>
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
}
|