Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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;
Advertisement
Add Comment
Please, Sign In to add comment