forked from cerc-io/snowballtools-base
28 lines
769 B
TypeScript
28 lines
769 B
TypeScript
import React, { forwardRef, RefAttributes } from 'react';
|
|
|
|
import { SearchIcon } from './shared/CustomIcon';
|
|
import { Input, InputProps } from './shared/Input';
|
|
|
|
const SearchBar: React.ForwardRefRenderFunction<
|
|
HTMLInputElement,
|
|
InputProps & RefAttributes<HTMLInputElement>
|
|
> = ({ value, onChange, placeholder = 'Search', ...props }, ref) => {
|
|
return (
|
|
<div className="relative flex w-full">
|
|
<Input
|
|
leftIcon={<SearchIcon className="text-foreground-secondary" />}
|
|
onChange={onChange}
|
|
value={value}
|
|
type="search"
|
|
placeholder={placeholder}
|
|
appearance="borderless"
|
|
className="w-full lg:w-[459px]"
|
|
{...props}
|
|
ref={ref}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default forwardRef(SearchBar);
|