Nicolas Cantu
2a191f35f4
- Fix unused function warnings by renaming to _unusedExtractTags - Fix type errors in nostrTagSystem.ts for includes() calls - Fix type errors in reviews.ts for filter kinds array - Fix ArrayBuffer type errors in articleEncryption.ts - Remove unused imports (DecryptionKey, decryptArticleContent, extractTagsFromEvent) - All TypeScript checks now pass without disabling any controls
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { SearchIcon } from './SearchIcon'
|
|
import { ClearButton } from './ClearButton'
|
|
import { t } from '@/lib/i18n'
|
|
|
|
interface SearchBarProps {
|
|
value: string
|
|
onChange: (value: string) => void
|
|
placeholder?: string
|
|
}
|
|
|
|
export function SearchBar({ value, onChange, placeholder }: SearchBarProps) {
|
|
const defaultPlaceholder = placeholder ?? t('search.placeholder')
|
|
const [localValue, setLocalValue] = useState(value)
|
|
|
|
useEffect(() => {
|
|
setLocalValue(value)
|
|
}, [value])
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newValue = e.target.value
|
|
setLocalValue(newValue)
|
|
onChange(newValue)
|
|
}
|
|
|
|
const handleClear = () => {
|
|
setLocalValue('')
|
|
onChange('')
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<SearchIcon />
|
|
</div>
|
|
<input
|
|
type="text"
|
|
value={localValue}
|
|
onChange={handleChange}
|
|
placeholder={defaultPlaceholder}
|
|
className="block w-full pl-10 pr-10 py-2 border border-neon-cyan/30 rounded-lg focus:ring-2 focus:ring-neon-cyan focus:border-neon-cyan bg-cyber-dark text-cyber-accent placeholder-cyber-accent/50 hover:border-neon-cyan/50 transition-colors"
|
|
/>
|
|
{localValue && <ClearButton onClick={handleClear} />}
|
|
</div>
|
|
)
|
|
}
|