From 4c7b2a3eb1c24a279a266d92f3d4dbd228a50a4f Mon Sep 17 00:00:00 2001
From: Sean Marcia <smarcia@gmail.com>
Date: Mon, 25 Sep 2023 12:43:11 -0400
Subject: [PATCH] More cleanup and added a footer.

---
 components/Footer.tsx             | 16 ++++++++++++++++
 components/GitHubOctocat.tsx      |  4 ++--
 components/RepositoryList.tsx     |  2 +-
 components/RepositoryMetadata.tsx |  6 +++---
 pages/index.tsx                   |  2 ++
 5 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 components/Footer.tsx

diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 00000000..f182da33
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,16 @@
+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>
+  );
+};
diff --git a/components/GitHubOctocat.tsx b/components/GitHubOctocat.tsx
index 928f4075..56a9abf4 100644
--- a/components/GitHubOctocat.tsx
+++ b/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>
   );
 };
diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx
index 7dbde755..c74644ef 100644
--- a/components/RepositoryList.tsx
+++ b/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 />
diff --git a/components/RepositoryMetadata.tsx b/components/RepositoryMetadata.tsx
index d03bd9b7..4b00bdfa 100644
--- a/components/RepositoryMetadata.tsx
+++ b/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:
diff --git a/pages/index.tsx b/pages/index.tsx
index 6bbb2b27..39e47f9f 100644
--- a/pages/index.tsx
+++ b/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 />
     </>
   );
 }