Kasper Fabricius Kristensen
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import clsx from "clsx"
|
|
import React from "react"
|
|
import SearchIcon from "../../fundamentals/icons/search-icon"
|
|
|
|
type TableSearchProps = {
|
|
autoFocus?: boolean
|
|
onSearch: (term: string) => void
|
|
placeholder?: string
|
|
searchValue?: string
|
|
} & React.HTMLAttributes<HTMLDivElement>
|
|
|
|
const TableSearch: React.FC<TableSearchProps> = ({
|
|
autoFocus,
|
|
onSearch,
|
|
placeholder = "Search",
|
|
searchValue,
|
|
className,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"inter-small-regular transition-color text-grey-50 rounded-rounded border-grey-20 min-w-content focus-within:shadow-input focus-within:border-violet-60 bg-grey-5 mt-1 mb-1 flex w-60 items-center border py-1.5 pl-1",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<span className="px-2.5 py-0.5">
|
|
<SearchIcon size={16} />
|
|
</span>
|
|
<input
|
|
autoFocus={autoFocus}
|
|
type="text"
|
|
value={searchValue}
|
|
className={clsx(
|
|
"inter-small-regular focus:text-grey-90 caret-violet-60 placeholder:inter-small-regular placeholder-grey-40 w-full bg-transparent focus:border-none focus:outline-none"
|
|
)}
|
|
placeholder={placeholder}
|
|
onChange={(e) => {
|
|
onSearch(e.target.value)
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TableSearch
|