add other projects

apps/studio.saladeaula.digital/app/components/search-form.tsx

@@ -0,0 +1,47 @@
+import { debounce } from 'lodash'
+import { SearchIcon } from 'lucide-react'
+import { useRef } from 'react'
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput
+} from '@/components/ui/input-group'
+
+import { useKeyPress } from '@/hooks/use-keypress'
+import { cn } from '@/lib/utils'
+
+export function SearchForm({
+  placeholder,
+  className,
+  onChange,
+  ...props
+}: {
+  placeholder?: React.ReactNode
+  className?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+} & React.HTMLAttributes<HTMLDivElement>) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useKeyPress('/', () => {
+    inputRef.current?.focus()
+  })
+
+  return (
+    <InputGroup className="group">
+      <InputGroupInput
+        className={cn('peer', className)}
+        placeholder=" "
+        ref={inputRef}
+        onChange={debounce(onChange, 200)}
+        {...props}
+      />
+      <InputGroupAddon>
+        <SearchIcon />
+      </InputGroupAddon>
+      <InputGroupAddon className="font-normal hidden peer-focus-within:hidden peer-placeholder-shown:block">
+        {placeholder}
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}