The search results widget template with layout options

npx install --save-dev @sitecore-search/cli

{
    "components-path": "src-test/components"
}

npx sc-search new-widget --language typescript --template search-results-row-grid --entity content --styling plain

npm install @radix-ui/react-icons@^1.3.0

// index.tsx
import { useState } from 'react';

import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, GridIcon, ListBulletIcon } from '@radix-ui/react-icons';
import { Presence } from '@radix-ui/react-presence';
import type { SearchResultsInitialState, SearchResultsStoreState } from '@sitecore-search/react';
import { WidgetDataType, useSearchResults, useSearchResultsSelectedFilters, widget } from '@sitecore-search/react';
import {
  AccordionFacets,
  ArticleCard,
  CardViewSwitcher,
  FacetItem,
  Pagination,
  SearchResultsAccordionFacets,
  Select,
  SortSelect,
} from '@sitecore-search/ui';

type ArticleModel = {
  id: string;
  type?: string;
  title?: string;
  name?: string;
  subtitle?: string;
  url?: string;
  description?: string;
  content_text?: string;
  image_url?: string;
  source_id?: string;
};
type ArticlesSearchResultsProps = {
  defaultSortType?: SearchResultsStoreState['sortType'];
  defaultPage?: SearchResultsStoreState['page'];
  defaultItemsPerPage?: SearchResultsStoreState['itemsPerPage'];
  defaultKeyphrase?: SearchResultsStoreState['keyphrase'];
};
type InitialState = SearchResultsInitialState<'itemsPerPage' | 'keyphrase' | 'page' | 'sortType'>;
const buildRangeLabel = (min: number | undefined, max: number | undefined): string => {
  return typeof min === 'undefined' ? `< $${max}` : typeof max === 'undefined' ? ` > $${min}` : `$${min} - $${max}`;
};
const buildFacetLabel = (selectedFacet: any) => {
  if ('min' in selectedFacet || 'max' in selectedFacet) {
    return `${selectedFacet.facetLabel}: ${buildRangeLabel(selectedFacet.min, selectedFacet.max)}`;
  }
  return `${selectedFacet.facetLabel}: ${selectedFacet.valueLabel}`;
};
export const SearchResultsWithLayoutOptionComponent = ({
  defaultSortType = 'featured_desc',
  defaultPage = 1,
  defaultKeyphrase = '',
  defaultItemsPerPage = 24,
}: ArticlesSearchResultsProps) => {
  const {
    widgetRef,
    actions: {
      onResultsPerPageChange,
      onPageNumberChange,
      onItemClick,
      onRemoveFilter,
      onSortChange,
      onFacetClick,
      onClearFilters,
    },
    state: { sortType, page, itemsPerPage },
    queryResult: {
      isLoading,
      isFetching,
      data: {
        total_item: totalItems = 0,
        sort: { choices: sortChoices = [] } = {},
        facet: facets = [],
        content: articles = [],
      } = {},
    },
  } = useSearchResults<ArticleModel, InitialState>({
    state: {
      sortType: defaultSortType,
      page: defaultPage,
      itemsPerPage: defaultItemsPerPage,
      keyphrase: defaultKeyphrase,
    },
  });
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  const selectedSortIndex = sortChoices.findIndex((s) => s.name === sortType);
  const selectedFacetsFromApi = useSearchResultsSelectedFilters();
  const defaultCardView = CardViewSwitcher.CARD_VIEW_LIST;
  const [dir, setDir] = useState(defaultCardView);
  const onToggle = (value = defaultCardView) => setDir(value);
  return (
    <>
      {isLoading && (
        <div>
          <Presence present={isLoading}>
            <svg
              aria-busy={isLoading}
              aria-hidden={!isLoading}
              focusable="false"
              role="progressbar"
              viewBox="0 0 20 20"
            >
              <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
            </svg>
          </Presence>
        </div>
      )}
      {!isLoading && (
        <div ref={widgetRef}>
          <div>
            {isFetching && (
              <div>
                <Presence present={true}>
                  <svg aria-busy={true} aria-hidden={false} focusable="false" role="progressbar" viewBox="0 0 20 20">
                    <path d="M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z" />
                  </svg>
                </Presence>
              </div>
            )}
            {totalItems > 0 && (
              <>
                <section>
                  {selectedFacetsFromApi.length > 0 && <button onClick={onClearFilters}>Clear Filters</button>}
                  <ul>
                    {selectedFacetsFromApi.map((selectedFacet) => (
                      <li key={`${selectedFacet.facetId}${selectedFacet.facetLabel}${selectedFacet.valueLabel}`}>
                        <span>{buildFacetLabel(selectedFacet)}</span>
                        <button onClick={() => onRemoveFilter(selectedFacet)}>X</button>
                      </li>
                    ))}
                  </ul>
                  <SearchResultsAccordionFacets
                    defaultFacetTypesExpandedList={[]}
                    onFacetTypesExpandedListChange={() => {}}
                    onFacetValueClick={onFacetClick}
                  >
                    {facets.map((f) => (
                      <AccordionFacets.Facet facetId={f.name} key={f.name}>
                        <AccordionFacets.Header>
                          <AccordionFacets.Trigger>{f.label}</AccordionFacets.Trigger>
                        </AccordionFacets.Header>
                        <AccordionFacets.Content>
                          <AccordionFacets.ValueList>
                            {f.value.map((v, index) => (
                              <FacetItem
                                {...{
                                  index,
                                  facetValueId: v.id,
                                }}
                                key={v.id}
                              >
                                <AccordionFacets.ItemCheckbox>
                                  <AccordionFacets.ItemCheckboxIndicator>
                                    <CheckIcon />
                                  </AccordionFacets.ItemCheckboxIndicator>
                                </AccordionFacets.ItemCheckbox>
                                <AccordionFacets.ItemLabel>
                                  {v.text} {v.count && `(${v.count})`}
                                </AccordionFacets.ItemLabel>
                              </FacetItem>
                            ))}
                          </AccordionFacets.ValueList>
                        </AccordionFacets.Content>
                      </AccordionFacets.Facet>
                    ))}
                  </SearchResultsAccordionFacets>
                </section>
                <section>
                  <section>
                    {totalItems && (
                      <div>
                        <b>
                          Showing {itemsPerPage * (page - 1) + 1} - {itemsPerPage * (page - 1) + articles.length} of{' '}
                          {totalItems} results
                        </b>
                      </div>
                    )}

                    <div>
                      {/* Card View Switcher */}
                      <CardViewSwitcher.Root onValueChange={onToggle} defaultValue={defaultCardView}>
                        <CardViewSwitcher.Item value="grid" aria-label="Grid View">
                          <GridIcon />
                        </CardViewSwitcher.Item>
                        <CardViewSwitcher.Item value="list" aria-label="List View">
                          <ListBulletIcon />
                        </CardViewSwitcher.Item>
                      </CardViewSwitcher.Root>

                      {/* Sort Select */}
                      <SortSelect.Root defaultValue={sortChoices[selectedSortIndex]?.name} onValueChange={onSortChange}>
                        <SortSelect.Trigger>
                          <SortSelect.SelectValue>
                            {selectedSortIndex > -1 ? sortChoices[selectedSortIndex].label : ''}
                          </SortSelect.SelectValue>
                          <SortSelect.Icon />
                        </SortSelect.Trigger>
                        <SortSelect.Content>
                          <SortSelect.Viewport>
                            {sortChoices.map((option) => (
                              <SortSelect.Option value={option} key={option.name}>
                                <SortSelect.OptionText>{option.label}</SortSelect.OptionText>
                              </SortSelect.Option>
                            ))}
                          </SortSelect.Viewport>
                        </SortSelect.Content>
                      </SortSelect.Root>
                    </div>
                  </section>

                  {/* Results */}
                  {dir === CardViewSwitcher.CARD_VIEW_GRID ? (
                    <div>
                      {articles.map((a, index) => (
                        <ArticleCard.Root key={a.id}>
                          <div>
                            <ArticleCard.Image src={a.image_url} />
                          </div>
                          <ArticleCard.Id>{a.id}</ArticleCard.Id>
                          <ArticleCard.Title>
                            <a
                              href="#"
                              onClick={(e) => {
                                e.preventDefault();
                                onItemClick({
                                  id: a.id,
                                  index,
                                  sourceId: a.source_id,
                                });
                              }}
                            >
                              {a.name}
                            </a>
                          </ArticleCard.Title>
                        </ArticleCard.Root>
                      ))}
                    </div>
                  ) : (
                    <div>
                      {articles.map((a, index) => (
                        <ArticleCard.Root key={a.id}>
                          <div>
                            <ArticleCard.Image src={a.image_url} />
                          </div>
                          <div>
                            <ArticleCard.Title>
                              <a
                                href="#"
                                onClick={(e) => {
                                  e.preventDefault();
                                  onItemClick({
                                    id: a.id,
                                    index,
                                    sourceId: a.source_id,
                                  });
                                }}
                              >
                                {a.name}
                              </a>
                            </ArticleCard.Title>
                            <ArticleCard.Content>{a.content_text}</ArticleCard.Content>
                          </div>
                        </ArticleCard.Root>
                      ))}
                    </div>
                  )}
                  <div>
                    <div>
                      <label>Results Per Page</label>
                      <Select.Root
                        defaultValue={String(defaultItemsPerPage)}
                        onValueChange={(v) =>
                          onResultsPerPageChange({
                            numItems: Number(v),
                          })
                        }
                      >
                        <Select.Trigger>
                          <Select.SelectValue />
                          <Select.Icon />
                        </Select.Trigger>
                        <Select.SelectContent>
                          <Select.Viewport>
                            <Select.SelectItem value="24">
                              <SortSelect.OptionText>24</SortSelect.OptionText>
                            </Select.SelectItem>

                            <Select.SelectItem value="48">
                              <SortSelect.OptionText>48</SortSelect.OptionText>
                            </Select.SelectItem>

                            <Select.SelectItem value="64">
                              <SortSelect.OptionText>64</SortSelect.OptionText>
                            </Select.SelectItem>
                          </Select.Viewport>
                        </Select.SelectContent>
                      </Select.Root>
                    </div>
                    <Pagination.Root
                      currentPage={page}
                      defaultCurrentPage={1}
                      totalPages={totalPages}
                      onPageChange={(v) =>
                        onPageNumberChange({
                          page: v,
                        })
                      }
                    >
                      <Pagination.PrevPage onClick={(e) => e.preventDefault()}>
                        <ArrowLeftIcon />
                      </Pagination.PrevPage>
                      <Pagination.Pages>
                        {(pagination) =>
                          Pagination.paginationLayout(pagination, {}).map(({ page, type }) =>
                            type === 'page' ? (
                              <Pagination.Page
                                key={page}
                                aria-label={`Page ${page}`}
                                page={page as number}
                                onClick={(e) => e.preventDefault()}
                              >
                                {page}
                              </Pagination.Page>
                            ) : (
                              <span key={type}>...</span>
                            ),
                          )
                        }
                      </Pagination.Pages>
                      <Pagination.NextPage onClick={(e) => e.preventDefault()}>
                        <ArrowRightIcon />
                      </Pagination.NextPage>
                    </Pagination.Root>
                  </div>
                </section>
              </>
            )}
            {totalItems <= 0 && !isFetching && (
              <div>
                <h3>0 Results</h3>
              </div>
            )}
          </div>
        </div>
      )}
    </>
  );
};
const SearchResultsWithLayoutOptionWidget = widget(SearchResultsWithLayoutOptionComponent, WidgetDataType.SEARCH_RESULTS, 'content');
export default SearchResultsWithLayoutOptionWidget;