page.tsx:

import SearchResults, {
  Response,
} from "../components/search-results/SearchResults";
import styles from "./page.module.scss";
import Image from "next/image";
import { use } from "react";

export interface ResultsProps {
  searchResults: Response[];
}

async function search() {
  let res = await fetch(
    `http://address/api/Search?searchString=figma`
  );
  console.log("Response " + res);
  return res;
}

function Results({ searchResults }: ResultsProps) {
  let { data } = use(search());
  console.log("DATA " + data);
  return (
    <main>
      {searchResults != null && searchResults.length !== 0 ? (
        <>
          <h1>{searchResults.length} Colleagues are found!</h1>
          <hr />
          <SearchResults data={data} />
        </>
      ) : (
        <>
          <h1>No one is found!</h1>
          <hr />
          <Image
            className={styles.noResultsImage}
            src="./assets/no-results.svg"
            alt="No one is found!"
            width={500}
            height={500}
          />
        </>
      )}
    </main>
  );
}

export default Results;

component.tsx:

"use client";

import React from "react";
import SearchCard from "../search-card/SearchCard";
import styles from "./SearchResults.module.scss";

export interface SearchResult {
  skillName: string;
  skillLevel: number;
  lastUsed: string;
  comment: string;
  userName: string;
  userTitle: string;
  userPFP: string;
}

export interface Response {
  category: string;
  results: SearchResult[];
}

export interface SearchResultsProps {
  data: Response[];
}

const SearchResults = ({ data }: SearchResultsProps) => {
  return (
    <div>
      {data.map((i, index) => (
        <div key={index}>
          <h2>{i.category}</h2>
          {i.results.map((r, resultIndex) => (
            <SearchCard
              key={`result.${index}.${resultIndex}`}
              skillName={r.skillName}
              skillLevel={r.skillLevel}
              lastUsed={r.lastUsed}
              comment={r.comment}
              userName={r.userName}
              userTitle={r.userTitle}
              userPFP={r.userPFP}
            />
          ))}
        </div>
      ))}
    </div>
  );
};

export default SearchResults;