`components/SortDropdown.tsx`

45 lines
'use client'

interface SortDropdownProps {
  value: string
  onChange: (value: string) => void
}

export default function SortDropdown({ value, onChange }: SortDropdownProps) {
  const sortOptions = [
    { value: 'price-asc', label: 'Price: Low to High', icon: '💰' },
    { value: 'price-desc', label: 'Price: High to Low', icon: '💎' },
    { value: 'rating-desc', label: 'Rating: High to Low', icon: '⭐' },
    { value: 'rating-asc', label: 'Rating: Low to High', icon: '⭐' },
    { value: 'name', label: 'Name: A to Z', icon: '🔤' },
  ]

  const currentOption = sortOptions.find((opt) => opt.value === value)

  return (
    <div className="relative">
      <label htmlFor="sort-dropdown" className="sr-only">
        Sort wines by
      </label>
      <select
        id="sort-dropdown"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="appearance-none pl-4 pr-10 py-2.5 rounded-lg bg-white border-2 border-gray-200 hover:border-wine-300 focus:border-wine-600 focus:ring-2 focus:ring-wine-200 outline-none transition-all text-sm font-medium text-gray-900 cursor-pointer min-h-[44px]"
        style={{ fontSize: '16px' }} // Prevent iOS zoom
      >
        {sortOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.icon} {option.label}
          </option>
        ))}
      </select>
      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </div>
    </div>
  )
}