This commit is contained in:
2025-07-24 12:33:43 +09:00
parent 53fa1c6ffa
commit 5aabca06c0
2 changed files with 16 additions and 16 deletions
+1 -1
View File
@@ -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} />
+15 -15
View File
@@ -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>)
} }