Search

import { Search } from '@xweather/maps-ui-sdk';
 
const SearchExample = () => {
  const handleSelectResult = (result) => {
    const { lat, long } = result.loc;
    // Handle the selected location
  };
 
  return (
    <Search onSelectResult={handleSelectResult}>
      <Search.Bar>
        <Search.SearchIcon />
        <Search.Input placeholder="Search for a location" />
        <Search.LoadingSpinner />
        <Search.ClearButton />
        <Search.GeolocateButton />
      </Search.Bar>
      <Search.ResultsFetcher>
        <Search.ResultsData>
          {({ results, visitedLocations, hasResults }) => (
            <Search.ScrollableArea>
              {visitedLocations.length > 0 && (
                <Search.Group title="Recent">
                  {visitedLocations.map((item) => (
                    <Search.Item key={item.id} item={item} />
                  ))}
                </Search.Group>
              )}
              {hasResults && (
                <>
                  <Search.Group title="Cities">
                    {results
                      .filter((item) => item.type === 'city')
                      .map((item) => (
                        <Search.Item key={item.id} item={item} />
                      ))}
                  </Search.Group>
                  <Search.Group title="Places">
                    {results
                      .filter((item) => item.type === 'place')
                      .map((item) => (
                        <Search.Item key={item.id} item={item} />
                      ))}
                  </Search.Group>
                </>
              )}
            </Search.ScrollableArea>
          )}
        </Search.ResultsData>
      </Search.ResultsFetcher>
    </Search>
  );
};

import { useEffect, useState, useRef } from 'react';
import { Search, Tabs } from '@xweather/maps-ui-sdk';
 
const TabbedSearch = () => {
  const [currentTab, setCurrentTab] = useState<string | null>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const [coordinates, setCoordinates] = useState<{ lat: number; lon: number } | null>(null);
 
  // Auto-focus search input when tab is selected
  useEffect(() => {
    if (currentTab === 'search') {
      searchInputRef.current?.focus();
    }
  }, [currentTab]);
 
  const handleSelectResult = (result) => {
    const { lat, long } = result.loc;
    setCoordinates({ lat, lon: long });
  };
 
  return (
    <Tabs.Provider value={currentTab} onChange={setCurrentTab}>
      <Tabs.List>
        <Tabs.Button value="search">Search Tab</Tabs.Button>
        <Tabs.Button value="settings">Settings Tab</Tabs.Button>
      </Tabs.List>
 
      <Tabs.Content value="search">
        <Search
          className="sm:w-90"
          inputRef={searchInputRef}
          onSelectResult={handleSelectResult}
        >
          <Search.Bar>
            <Search.SearchIcon />
            <Search.Input />
            <Search.LoadingSpinner />
            <Search.ClearButton />
            <Search.GeolocateButton />
          </Search.Bar>
          <Search.ResultsFetcher>
            <Search.ResultsData>
              {/* Results rendering */}
            </Search.ResultsData>
          </Search.ResultsFetcher>
        </Search>
      </Tabs.Content>
    </Tabs.Provider>
  );
};

const customFormatter = (result: SearchResult) => {
  if (result.type === 'city') {
    return `${result.name}, ${result.admin1}, ${result.country}`;
  }
  return `${result.name} (${result.type})`;
};
 
const SearchWithCustomFormat = () => (
  <Search resultFormatter={customFormatter}>
    {/* Search components */}
  </Search>
);