This commit is contained in:
@@ -93,7 +93,7 @@ const TagSearch: React.FC = () => {
|
|||||||
onFocus={() => setSuggestionsVsbl (true)}
|
onFocus={() => setSuggestionsVsbl (true)}
|
||||||
onBlur={() => setSuggestionsVsbl (false)}
|
onBlur={() => setSuggestionsVsbl (false)}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
className="w-full px-3 py-2 border rounded border-gray-600 bg-gray-800 text-white" />
|
className="w-full px-3 py-2 border rounded dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
|
||||||
<TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
|
<TagSearchBox suggestions={suggestionsVsbl && suggestions.length ? suggestions : [] as Tag[]}
|
||||||
activeIndex={activeIndex}
|
activeIndex={activeIndex}
|
||||||
onSelect={handleTagSelect} />
|
onSelect={handleTagSelect} />
|
||||||
|
|||||||
@@ -3,26 +3,26 @@ import { cn } from '@/lib/utils'
|
|||||||
import type { Tag } from '@/types'
|
import type { Tag } from '@/types'
|
||||||
|
|
||||||
type Props = { suggestions: Tag[]
|
type Props = { suggestions: Tag[]
|
||||||
activeIndex: number
|
activeIndex: number
|
||||||
onSelect: (tag: Tag) => void }
|
onSelect: (tag: Tag) => void }
|
||||||
|
|
||||||
|
|
||||||
export default ({ suggestions, activeIndex, onSelect }: Props) => {
|
export default ({ suggestions, activeIndex, onSelect }: Props) => {
|
||||||
if (!(suggestions.length))
|
if (!(suggestions.length))
|
||||||
return null
|
return
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ul className="absolute left-0 right-0 z-50 w-full bg-gray-800 border border-gray-600 rounded shadow">
|
<ul className="absolute left-0 right-0 z-50 w-full
|
||||||
{suggestions.map ((tag, i) => (
|
bg-gray-100 dark:bg-gray-800 border dark:border-gray-600
|
||||||
<li key={tag.id}
|
rounded shadow">
|
||||||
className={cn ('px-3 py-2 cursor-pointer',
|
{suggestions.map ((tag, i) => (
|
||||||
(i === activeIndex
|
<li key={tag.id}
|
||||||
? 'bg-blue-600 text-white'
|
className={cn ('px-3 py-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700',
|
||||||
: 'hover:bg-gray-700'))}
|
i === activeIndex && 'bg-gray-300 dark:bg-gray-700')}
|
||||||
onMouseDown={() => onSelect (tag)}
|
onMouseDown={() => onSelect (tag)}
|
||||||
>
|
>
|
||||||
{tag.name}
|
{tag.name}
|
||||||
{<span className="ml-2 text-sm text-gray-400">{tag.postCount}</span>}
|
{<span className="ml-2 text-sm text-gray-400">{tag.postCount}</span>}
|
||||||
</li>))}
|
</li>))}
|
||||||
</ul>)
|
</ul>)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user