Search

import { Search } from '@xweather/maps-ui-sdk';
 
const SearchExample = () => {
  const handleSelectResult = (result: SearchResult) => {
    const { lat, lon } = result.coordinates;
    // Handle the selected location
  };
 
  return (
    <Search onSelectResult={handleSelectResult}>
      <Search.Bar>
        <Search.SearchIcon />
        <Search.Input placeholder="Search for a location" />
        <Search.LoadingSpinner />
        <Search.Clear />
        <Search.GeolocateButton />
      </Search.Bar>
 
      <Search.ResultsFetcher>
        <Search.ResultsData>
          {({ places, stations, recentSelections, hasResults }) => (
            <Search.ScrollableArea>
              {recentSelections.length > 0 && (
                <Search.Group>
                  <Search.GroupTitle>Recent</SearchGroupTitle>
                  {recentSelections.map((item) => (
                    <Search.Item key={item.trackingId} item={item}>
                      <Search.ItemButton />
                    </Search.Item>
                  ))}
                </Search.Group>
              )}
 
              {hasResults && (
                <>
                  <Search.Group>
                    <Search.GroupTitle>Places</Search.GroupTitle>
                    {places.map((item) => (
                      <Search.Item key={item.trackingId} item={item}>
                        <Search.ItemButton />
                      </Search.Item>
                    ))}
                  </Search.Group>
 
                  <Search.Group>
                    <Search.GroupTitle>Stations</Search.GroupTitle>
                    {stations.map((item) => (
                      <Search.Item key={item.trackingId} item={item}>
                        <Search.ItemButton />
                      </Search.Item>
                    ))}
                  </Search.Group>
                </>
              )}
            </Search.ScrollableArea>
          )}
        </Search.ResultsData>
      </Search.ResultsFetcher>
    </Search>
  );
};

import { useEffect, useState, useRef } from 'react';
import { Search, Tabs } from '@xweather/maps-ui-sdk';
import { type Coordinates } from '@xweather/maps-ui-sdk/dist/types/location';
 
const TabbedSearch = () => {
  const [currentTab, setCurrentTab] = useState<string | null>(null);
  const searchInputRef = useRef<HTMLInputElement>(null);
  const [coordinates, setCoordinates] = useState<Coordinates | null>(null);
 
  // Auto-focus search input when tab is selected
  useEffect(() => {
    if (currentTab === 'search') {
      searchInputRef.current?.focus();
    }
  }, [currentTab]);
 
  const handleSelectResult = (result) => setCoordinates(result.coordinates);
 
  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.Clear />
            <Search.GeolocateButton />
          </Search.Bar>
          <Search.ResultsFetcher>
            <Search.ResultsData>
              {/* Results rendering */}
            </Search.ResultsData>
          </Search.ResultsFetcher>
        </Search>
      </Tabs.Content>
    </Tabs.Provider>
  );
};

const resultFormatter = (result: SearchResult) => {
  // Coordinate queries: "Lat: 40.442, Lon: -79.954"
  if (result.queryMeta?.type === 'coordinate') {
    const { lat, lon } = result.coordinates;
    return `Lat: ${lat.toFixed(3)}, Lon: ${lon.toFixed(3)}`;
  }
 
  // Place results: "Minneapolis - MN"
  if (result.place && 'place' in result) {
    const { place } = result;
    const parts = [
      place.name?.trim(),
      place.state?.toUpperCase(),
      place.country === 'US' ? null : place.countryFull,
    ].filter(Boolean);
 
    return parts.join(' - ');
  }
 
  // Station results: "Station: KMSP"
  if (result.id && 'id' in result) {
    const stationId = result.id.replace(/^.*?_/, '');
    return `Station: ${stationId}`;
  }
 
  return '';
};
 
const SearchWithCustomFormat = () => (
  <Search resultFormatter={resultFormatter}>
    {/* Search components */}
  </Search>
);