spb/countryatlas

1'use client';2import { Search } from 'lucide-react';3import { t } from '@/i18n';4import { cn } from '@/lib/cn';5import { useOpenSearch } from './search-context';67/** Header search field look-alike (button) — desktop shows the ⌘K hint, mobile an icon button. */8export function SearchTrigger({ variant = 'field', className }: { variant?: 'field' | 'icon' | 'hero'; className?: string }) {9  const open = useOpenSearch();10  if (variant === 'icon') {11    return (12      <button type="button" onClick={open} className={cn('tap grid place-items-center rounded-sm text-ink-2 hover:bg-surface-2 hover:text-ink', className)} aria-label={t('search.open')}>13        <Search size={18} aria-hidden />14      </button>15    );16  }17  if (variant === 'hero') {18    return (19      <button type="button" onClick={open} className={cn('flex h-12 w-full items-center gap-3 rounded-md border border-rule-strong bg-surface px-4 text-left text-base text-ink-3 shadow-[0_1px_0_rgba(0,0,0,0.03)] hover:border-accent hover:text-ink-2', className)}>20        <Search size={18} aria-hidden className="text-ink-3" />21        <span className="flex-1 truncate">{t('search.placeholder')}</span>22        <kbd className="hidden rounded-xs border border-rule px-1.5 py-0.5 font-ui text-2xs text-ink-3 md:inline">{t('search.shortcut')}</kbd>23      </button>24    );25  }26  return (27    <button type="button" onClick={open} className={cn('flex h-9 w-44 items-center gap-2 rounded-sm border border-rule bg-surface px-2.5 text-left text-sm text-ink-3 hover:border-rule-strong hover:text-ink-2 xl:w-72', className)} aria-label={t('search.open')}>28      <Search size={15} aria-hidden />29      <span className="flex-1 truncate">{t('search.placeholder.short')}</span>30      <kbd className="rounded-xs border border-rule px-1 py-px font-ui text-2xs">{t('search.shortcut')}</kbd>31    </button>32  );33}34