1a55d8bd39
* MP-3104: added deleteAccount and alerts for vaults and debts * MP-3104: added Borrow and Farm links to the AlertDialog * MP-3104: finished delete flow * fix: adjusted according to feedback * refactor: tidy
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import classNames from 'classnames'
|
|
import React, { ChangeEvent, LegacyRef } from 'react'
|
|
|
|
import { Search } from 'components/Icons'
|
|
|
|
interface Props {
|
|
value: string
|
|
placeholder: string
|
|
autoFocus?: boolean
|
|
onChange: (value: string) => void
|
|
}
|
|
|
|
const SearchBar = (props: Props, ref: LegacyRef<HTMLDivElement>) => {
|
|
function onChange(event: ChangeEvent<HTMLInputElement>) {
|
|
props.onChange(event.target.value)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'flex w-full items-center justify-between rounded-sm bg-white/10 p-2.5',
|
|
'relative isolate max-w-full overflow-hidden rounded-sm',
|
|
'before:content-[" "] before:absolute before:inset-0 before:-z-1 before:rounded-sm before:p-[1px] before:border-glas',
|
|
)}
|
|
ref={ref}
|
|
>
|
|
<Search width={14} height={14} className='mr-2.5 text-white' />
|
|
<input
|
|
value={props.value}
|
|
className='h-full w-full bg-transparent text-xs placeholder-white/50 outline-none'
|
|
placeholder={props.placeholder}
|
|
onChange={(event) => onChange(event)}
|
|
autoFocus={props.autoFocus}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.forwardRef(SearchBar)
|