feat: scaffold tickets experience

web/src/components/search-form.tsx

@@ -0,0 +1,28 @@
+import { Search } from "lucide-react"
+
+import { Label } from "@/components/ui/label"
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from "@/components/ui/sidebar"
+
+type SearchFormProps = React.ComponentProps<"form"> & {
+  placeholder?: string
+}
+
+export function SearchForm({ placeholder = "Buscar...", ...props }: SearchFormProps) {
+  return (
+    <form {...props}>
+      <SidebarGroup className="py-0">
+        <SidebarGroupContent className="relative">
+          <Label htmlFor="search" className="sr-only">
+            Busca global
+          </Label>
+          <SidebarInput id="search" placeholder={placeholder} className="pl-8" />
+          <Search className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" />
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </form>
+  )
+}