DaisyUIとTailwind CSSで検索UIを美しく実装する

import { useState, useEffect, useRef } from 'react'

export const AdvancedSearchComponent = () => {
  const [isSearchOpen, setIsSearchOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')
  const [searchResults, setSearchResults] = useState([])
  const [isLoading, setIsLoading] = useState(false)
  const [isComposing, setIsComposing] = useState(false)
  
  const searchRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

  // 外部クリックでドロップダウンを閉じる
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
        setIsSearchOpen(false)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  // フォーカス時に入力フィールドを自動選択
  useEffect(() => {
    if (isSearchOpen && inputRef.current) {
      inputRef.current.focus()
    }
  }, [isSearchOpen])

  return (
    <div className="w-full max-w-xl mx-auto mb-8 relative" ref={searchRef}>
      <div className="form-control">
        <div className="relative">
          <input
            ref={inputRef}
            type="text"
            value={searchQuery}
            onChange={handleInputChange}
            onFocus={() => setIsSearchOpen(true)}
            onCompositionStart={() => setIsComposing(true)}
            onCompositionEnd={handleCompositionEnd}
            placeholder="記事を検索..."
            className="input input-bordered input-md w-full pr-12 focus:input-primary transition-all duration-200 hover:shadow-md"
          />
          
          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-base-content opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>
        
        {/* ローディングスピナー */}
        {isLoading && (
          <div className="absolute right-10 top-1/2 transform -translate-y-1/2">
            <span className="loading loading-spinner loading-sm text-primary"></span>
          </div>
        )}
      </div>

      {/* 検索結果ドロップダウン */}
      {isSearchOpen && searchResults.length > 0 && (
        <SearchResultsDropdown 
          results={searchResults} 
          onItemClick={() => setIsSearchOpen(false)}
        />
      )}
      
      {/* 結果なしの表示 */}
      {isSearchOpen && searchQuery.length > 2 && searchResults.length === 0 && !isLoading && (
        <NoResultsDisplay />
      )}
    </div>
  )
}