mirror of
https://github.com/tailscale/tailscale.git
synced 2025-04-28 03:30:59 +00:00
29 lines
789 B
TypeScript
29 lines
789 B
TypeScript
|
import cx from "classnames"
|
||
|
|
import React, { forwardRef, InputHTMLAttributes } from "react"
|
||
|
|
import { ReactComponent as Search } from "src/icons/search.svg"
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
className?: string
|
||
|
|
inputClassName?: string
|
||
|
|
} & InputHTMLAttributes<HTMLInputElement>
|
||
|
|
|
||
|
|
/**
|
||
|
|
* SearchInput is a standard input with a search icon.
|
||
|
|
*/
|
||
|
|
const SearchInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
|
||
|
|
const { className, inputClassName, ...rest } = props
|
||
|
|
return (
|
||
|
|
<div className={cx("relative", className)}>
|
||
|
|
<Search className="absolute w-[1.25em] h-full ml-2" />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className={cx("input px-8", inputClassName)}
|
||
|
|
ref={ref}
|
||
|
|
{...rest}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
SearchInput.displayName = "SearchInput"
|
||
|
|
export default SearchInput
|