Translate pages

frontend/src/components/ui/DestinationDropdown.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
 import type { Destination } from '../../hooks/useTravelDestinations';
 import { useDropdownPosition } from '../../hooks/useDropdownPosition';
@@ -21,8 +22,9 @@ export function DestinationDropdown({
   onSelect,
   onClear,
   value,
-  placeholder = 'Select destination...',
+  placeholder,
 }: DestinationDropdownProps) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState('');
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -129,7 +131,7 @@ export function DestinationDropdown({
             setActiveIndex(-1);
           }}
           onKeyDown={handleKeyDown}
-          placeholder="Type to filter..."
+          placeholder={t('travel.typeToFilter')}
           className="w-full px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-warm-50 dark:bg-warm-900 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
         />
       </div>
@@ -138,7 +140,7 @@ export function DestinationDropdown({
       <div ref={listRef} className="max-h-48 overflow-y-auto">
         {filtered.length === 0 ? (
           <div className="px-2 py-2 text-xs text-warm-400 dark:text-warm-500 text-center">
-            {loading ? 'Loading...' : 'No destinations found'}
+            {loading ? t('common.loading') : t('travel.noDestinations')}
           </div>
         ) : (
           filtered.map((dest, idx) => (
@@ -190,7 +192,7 @@ export function DestinationDropdown({
           <span
             className={`flex-1 text-left truncate ${value ? 'text-navy-950 dark:text-warm-200' : 'text-warm-400 dark:text-warm-500'}`}
           >
-            {value || placeholder}
+            {value || placeholder || t('travel.selectDestination')}
           </span>
         </button>
         {value && onClear ? (
@@ -198,7 +200,7 @@ export function DestinationDropdown({
             type="button"
             onClick={onClear}
             className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
-            title="Clear destination"
+            title={t('travel.clearDestination')}
           >
             <CloseIcon className="w-3 h-3" />
           </button>