Mahyar Khanbolooki
30 lines
908 B
TypeScript
30 lines
908 B
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import SearchIcon from '../icons/SearchIcon';
|
|
import clsx from 'clsx';
|
|
|
|
interface SearchboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'results'> {
|
|
placeholder?: string;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
};
|
|
|
|
export default function SearchBox({ className, value, placeholder = '', onChange, ...props }: SearchboxProps) {
|
|
return (
|
|
<div className={clsx(
|
|
"bg-container inline-flex rounded-xl px-4 h-10 w-full items-center content-center",
|
|
className
|
|
)}>
|
|
<SearchIcon stroke="#8C90A3" />
|
|
<input
|
|
onChange={onChange}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
className="text-[#8C90A3] block outline-none border-none focus:ring-0 focus:outline-none text-sm px-[7px] h-full items-center w-full"
|
|
type="search"
|
|
{...props}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|