Function SearchBar

apps/web/ui/SearchBar/index.tsx:22–87

({
  className,
  brandColor,
  channels = [],
  accountId,
  api,
  handleSelect,
}: {
  className?: string;
  brandColor: string;
  channels: SerializedChannel[];
  accountId: string;
  api: ApiClient;
  handleSelect: (message: SerializedSearchMessage) => void;
})

};

const SearchBar = ({
  className,
  brandColor,
  channels = [],
  accountId,
  api,
  handleSelect,
}: {
  className?: string;
  brandColor: string;
  channels: SerializedChannel[];
  accountId: string;
  api: ApiClient;
  handleSelect: (message: SerializedSearchMessage) => void;
}) => {
  const renderSuggestion = (
    searchResult: SerializedSearchMessage,
    active: boolean
  ) => {
    const { body, channelId, author, mentions, messageFormat } = searchResult;
    const channel = channels.find((c) => c.id === channelId);
    const channelName = channel?.channelName;

    return (
      <div className={styles.suggestion}>
        <Suggestion
          body={body}
          format={messageFormat}
          user={author!}
          channelName={channelName}
          mentions={mentions}
          active={active}
        />
      </div>
    );
  };

  const fetchResults = async ({
    query,
    offset,
    limit,
  }: {
    query: string;
    offset: number;
    limit: number;
  }) => {
    const response = await api.searchMessages({
      query,
      offset,
      limit,
      accountId,
    });
    return parseResults(response);
  };

  return (
    <Autocomplete
      className={className}