More cleanup and added a footer.

github · Sep 25, 2023 · b8885ec · b8885ec
1 parent e59f45b
commit b8885ec
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 6 deletions.
diff --git a/components/Footer.tsx b/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>
+  );
+};
diff --git 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
@@ -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
@@ -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
@@ -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 />
     </>
   );
 }