feat: add search results

src/components/intro/intro.module.scss

@@ -1,5 +1,6 @@
 .wrapper {
  text-align: center;
+ margin-bottom: $spacing-xxs;
 }
 
 .heading {

src/components/searchResults/index.tsx

@@ -0,0 +1,31 @@
+import { useQuery } from "@apollo/client";
+
+import { SearchResultItemEdge } from "@/lib/types/githubTypes";
+import searchRepositories from "@/lib/queries/searchRepositories";
+import RepositoryItem from "./repositoryItem";
+
+interface SearchResultsProps {
+ searchTerm?: string;
+}
+
+export default function SearchResults({ searchTerm }: SearchResultsProps) {
+ const { loading, error, data } = useQuery(searchRepositories, {
+ variables: {
+ // TODO: Add use-debounce
+ search_term: searchTerm,
+ },
+ });
+
+ if (loading && searchTerm) return <p>Loading...</p>;
+ if (error) return <p>Error: error(</p>;
+
+ return (
+ <div>
+ {data?.search?.edges.map(({ node }: SearchResultItemEdge) => {
+ if (!node?.id) return;
+
+ return <RepositoryItem key={node.id} repository={node} />;
+ })}
+ </div>
+ );
+}

src/components/searchResults/repositoryItem/index.tsx

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { Repository } from "@/lib/types/githubTypes";
+
+import styles from "./repositoryItem.module.scss";
+
+// interface RepositoryProps {
+// name: string;
+// description?: string;
+// owner: { login: string };
+// primaryLanguage: string;
+// stargazers: { totalCount: string };
+// }
+
+interface RepositoryItemProps {
+ key: string;
+ repository: Repository;
+}
+
+export default function RepositoryItem({ repository }: RepositoryItemProps) {
+ const {
+ name,
+ description,
+ owner: { login },
+ primaryLanguage,
+ stargazers: { totalCount },
+ } = repository;
+
+ return (
+ <article className={styles.card}>
+ <div className={styles.heading}>
+ <Link href={`/${login}/${name}`}>
+ <a className={styles.title}>{name}</a>
+ </Link>
+ </div>
+ <span className={styles.owner}>
+ <small>by</small> {login}{" "}
+ </span>
+ {description && <p className={styles.description}>{description}</p>}
+ </article>
+ );
+}

src/pages/index.tsx

@@ -1,11 +1,20 @@
+import { useState } from "react";
 import type { NextPage } from "next";
 
 import Intro from "@/components/intro";
+import Search from "@/components/search";
+import SearchResults from "@/components/searchResults";
 
 const Home: NextPage = () => {
+ const [searchTerm, setSearchTerm] = useState("");
+
+ // TODO: URLProvider - Get searchTerm from query
+
  return (
  <>
  <Intro />
+ <Search setSearchTerm={setSearchTerm} />
+ <SearchResults searchTerm={searchTerm} />
  </>
  );
 };