hamid zarghami
39 lines
972 B
TypeScript
39 lines
972 B
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import SearchIcon from '../icons/SearchIcon'
|
|
import { glassSurfaceFlat } from '@/lib/styles/glassSurface'
|
|
|
|
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={glassSurfaceFlat(
|
|
'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] pt-1 block outline-none border-none focus:ring-0 focus:outline-none px-[7px] h-full items-center w-full text-xs!'
|
|
type='search'
|
|
{...props}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|