// First, import what we need from React SDK.
import { PageController, WidgetDataType, useSearchResults, widget } from '@sitecore-search/react';

// Import the component generated by the CLI.
import SearchPagination from '@/components/SearchPagination';

const {
  state: {page, itemsPerPage, },
  queryResult: { data: {
    content = [],
    total_item: totalItems = 0,
  } = {} },
} = useSearchResults({
  state: {
    page: 1,
    itemsPerPage: 24,
  },
});
const totalPages = Math.ceil(totalItems / itemsPerPage);
return (
  <>
    <ol>
      {content?.map((content, index) => (
        <li className="fade">
          #{(index + 1).toString().padStart(2, '0')} → {content.title}
        </li>
      ))}
    </ol>
    <SearchPagination currentPage={page} totalPages={totalPages} />
  </>
);

// Convert the regular component to a compatible widget.
const SearchResultsWrapperWidget = widget(SearchResultsWrapper, WidgetDataType.SEARCH_RESULTS, 'content');

// Then we can use the widget.
function MyApp() {
  return (
    <WidgetsProvider {...CONFIG}>
      <SearchResultsWrapperWidget rfkId="rfkid_7" />
    </WidgetsProvider>
  )
}