More cleanup and added a footer.

Author: seanmarcia

components/Footer.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+
+export const Footer = () => {
+  return (
+    <footer className="inset-x-0 bottom-0 bg-slate-700 text-center text-vanilla-100 py-3">
+      Built with{" "}
+      <span role="img" aria-label="love">
+        ❤️
+      </span>{" "}
+      by the{" "}
+      <Link
+        href="https://socialimpact.github.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-violet-100 hover:underline"
+      >
+        Github Social Impact Team
+      </Link>{" "}
+      & designed by{" "}
+      <Link
+        href="https://github.com/designbygia"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-violet-100 hover:underline"
+      >
+        @designbygia
+      </Link>
+    </footer>
+  );
+};

components/GeneralFilter.tsx

@@ -1,13 +1,21 @@
+import { FaSearch } from "react-icons/fa";
+
 type GeneralFilterProps = {
   filter: string | number | readonly string[] | undefined;
   setFilter: (filter: string | number | readonly string[] | undefined) => void;
 };
 
 export const GeneralFilter = ({ filter, setFilter }: GeneralFilterProps) => {
   return (
-    <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Search Repositories" className="flex-1 border rounded-sm p-2 mb-4" />
+    <div className="flex border bg-vanilla-100 rounded-sm mr-4">
+      <FaSearch className="self-center mr-2 ml-2" />
+      <input
+        type="text"
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        placeholder="Search Repositories"
+        className="flex-1 rounded-sm p-2"
+      />
+    </div>
   );
 };
-
-
-

components/GitHubOctocat.tsx

@@ -2,8 +2,8 @@ import Image from "next/image";
 
 export const GitHubOctocat = () => {
   return (
-    <div className="absolute z-10 right-80 top-60">
-    <Image src="/octocatwithbody.svg" alt="First Issue" width={384} height={384} />
+    <div className="absolute z-10 right-80 top-60 hidden sm:block">
+      <Image src="/octocatwithbody.svg" alt="First Issue" width={384} height={384} />
     </div>
   );
 };

components/HappyCommitsInfo.tsx

@@ -6,7 +6,7 @@ type FilterProps = {
 
 export const HappyCommitsInfo = ({filter, setFilter}: FilterProps) => {
   return (
-    <div style={{ paddingLeft: "10%" }}>
+    <div className="flex" style={{ paddingLeft: "10%" }}>
       <div style={{ width: 541, height: 291, flexDirection: "column" }}>
         <div
           style={{

components/RepositoryList.tsx

@@ -57,7 +57,7 @@ export const RepositoryList = ({ repositories, filter }: RepositoryListProps) =>
 
   return (
     <main className="grow">
-      <div className="p-4 w-full">
+      <div className="p-4 w-full mb-4">
         <div className="flex justify-center">
           <div className="w-[85%] justify-start items-start inline-flex mb-4">
             <FilterInfo />

components/RepositoryMetadata.tsx

@@ -15,7 +15,7 @@ export const RepositoryMetadata = ({
   repositoryTopics
 }: RepositoryMetadataProps) => {
   return (
-    <div className="justify-start items-start gap-6 inline-flex">
+    <div className="justify-start items-start gap-6 inline-flex flex-wrap">
       <div className="justify-start items-center gap-1 flex">
         <div className="text-zinc-900 text-sm font-normal font-['Inter'] leading-[21px]">
           Issues:{" "}
@@ -37,7 +37,7 @@ export const RepositoryMetadata = ({
           </div>
         </div>
       </div>
-      <div className="justify-start items-center gap-1 flex">
+      {repositoryTopics && repositoryTopics.length > 0 &&<div className="justify-start items-center gap-1 flex">
         <div className="text-zinc-900 text-sm font-normal font-['Inter'] leading-[21px]">
           Label:
         </div>
@@ -46,7 +46,7 @@ export const RepositoryMetadata = ({
             {repositoryTopics && repositoryTopics.map(topic => topic.display).join(', ')}
           </div>
         </div>
-      </div>
+      </div>}
       <div className="justify-start items-center gap-1 flex">
         <div className="text-zinc-900 text-sm font-normal font-['Inter'] leading-[21px]">
           Last activity:

pages/index.tsx

@@ -6,6 +6,7 @@ import { useAppData } from "../hooks/useAppData";
 import { Navbar } from "../components/Navbar";
 import { HeroContainer } from "../components/HeroContainer";
 import { GitHubOctocat } from "../components/GitHubOctocat";
+import { Footer } from "../components/Footer";
 
 export default function Home() {
   const { repositories } = useAppData();
@@ -20,6 +21,7 @@ export default function Home() {
       <HeroContainer filter={filter} setFilter={setFilter} />
       <GitHubOctocat />
       <RepositoryList repositories={repositories} filter={filter} />
+      <Footer />
     </>
   );
 }