From 509e112599771f7eb5704b918c767eb4d348e3da Mon Sep 17 00:00:00 2001
From: Aadarsh Thakur <95094057+Aadarsh805@users.noreply.github.com>
Date: Sat, 11 Feb 2023 19:56:25 +0530
Subject: [PATCH] feat: added footer (#160)

* added footer

* made footer static inside the right container,
fixed overflow,
made cards container overflow-scroll instead of whole container scrolling

* footer backgrund changed to backdrop-blur

* text color changed to gray

* pushed footer to end of the page
---
 components/BackToTop/BackToTopButton.tsx |  2 +-
 components/Footer/Footer.tsx             | 23 +++++++++++++++++++++++
 components/Footer/index.ts               |  1 +
 components/cards/index.tsx               |  2 +-
 layouts/GeneralLayout.tsx                |  4 +++-
 pages/[subcategory].tsx                  |  2 +-
 pages/index.tsx                          |  2 +-
 7 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 components/Footer/Footer.tsx
 create mode 100644 components/Footer/index.ts

diff --git a/components/BackToTop/BackToTopButton.tsx b/components/BackToTop/BackToTopButton.tsx
index 49a92e164..bd8b89707 100644
--- a/components/BackToTop/BackToTopButton.tsx
+++ b/components/BackToTop/BackToTopButton.tsx
@@ -29,7 +29,7 @@ export const BackToTopButton = () => {
 
   if (scrollY > SCROLL_LIMIT) {
     return (
-      <div className="group fixed bottom-12 right-12">
+      <div className="group fixed bottom-12 right-12 z-20">
         <button 
           className="focus:animate-button-press rounded-full border border-white bg-violet-600 p-4 text-white shadow-xl focus:ring group-hover:border-dashed group-hover:border-violet-400 group-hover:bg-white dark:drop-shadow-[5px_5px_8px_rgba(124,58,237,0.25)] dark:group-hover:bg-[#101623] md:border-violet-600"
           onClick={handleClick}>
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
new file mode 100644
index 000000000..9754e710e
--- /dev/null
+++ b/components/Footer/Footer.tsx
@@ -0,0 +1,23 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { FC } from "react";
+import Logo from "../logo";
+
+interface FooterProps {}
+
+export const Footer: FC<FooterProps> = ({}) => {
+  return (
+    <div className="w-full flex items-baseline justify-center z-10 gap-1 rounded-lg bg-[#ffffff0a] backdrop-blur-md sm:py-3 py-2 px-1 md:mt-4">
+      <p className="md:text-lg text-center text-gray-200">
+        Open source |{" "}
+        <Link
+          href="https://github.com/rupali-codes/LinksHub/blob/main/LICENSE"
+          target="_blank"
+        >
+          <span className="border-b-[1px]">MIT License</span>
+        </Link>{" "}
+        2023 LinksHub
+      </p>
+    </div>
+  );
+};
diff --git a/components/Footer/index.ts b/components/Footer/index.ts
new file mode 100644
index 000000000..9187c963b
--- /dev/null
+++ b/components/Footer/index.ts
@@ -0,0 +1 @@
+import { Footer } from "./Footer";
diff --git a/components/cards/index.tsx b/components/cards/index.tsx
index 9c71deb19..68d873219 100644
--- a/components/cards/index.tsx
+++ b/components/cards/index.tsx
@@ -16,7 +16,7 @@ const Cards = () => {
 
   return (
     <div
-      className={`flex flex-wrap flex-col md:flex-row w-full md:justify-start gap-4 items-center ${
+      className={`flex flex-wrap md:flex-row w-full md:justify-start gap-4 content-start lg:min-h-[calc(90vh-80px)] min-h-[calc(90vh-150px)] mb-2 ${
         filterDB.length < 3 && "lg:justify-start"
       }`}
     >
diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx
index 9f11f20e9..b7d809d14 100644
--- a/layouts/GeneralLayout.tsx
+++ b/layouts/GeneralLayout.tsx
@@ -1,12 +1,14 @@
 import React, { ReactNode } from "react";
+import { Footer } from "../components/Footer/Footer";
 import { SideNavbar } from "../components/SideNavbar";
 
 const GeneralLayout = ({ children }: { children: ReactNode }) => {
   return (
     <section>
       <SideNavbar />
-      <div className="bg-gray-100 dark:bg-[#101623] transition-all ease-in duration-300 mx-auto mt-20 min-h-[calc(100vh-80px)] md:pb-8 lg:ml-20 lg:mt-0 lg:min-h-screen lg:pl-[290px]">
+      <div className="bg-gray-100 dark:bg-[#101623] transition-all ease-in duration-300 mx-auto mt-20 min-h-[calc(100vh-85px)] pb-[1rem] lg:ml-20 lg:mt-0 lg:pl-[290px] px-4">
         {children}
+        <Footer />
       </div>
     </section>
   );
diff --git a/pages/[subcategory].tsx b/pages/[subcategory].tsx
index 5fff45223..81a5b2ffa 100644
--- a/pages/[subcategory].tsx
+++ b/pages/[subcategory].tsx
@@ -8,7 +8,7 @@ const SubCategory = () => {
   const router = useRouter();
   const title :any = `LinksHub - ${router.asPath.charAt(1).toUpperCase()}${router.asPath.slice(2)}`;
   return (
-    <section className="px-4">
+    <section>
       <Head>
         <title>{title}</title>
       </Head>
diff --git a/pages/index.tsx b/pages/index.tsx
index ec2c91449..33996c008 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -12,7 +12,7 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/icon.ico" className="rounded-full" />
       </Head>
-      <main className="h-screen flex flex-col">
+      <main className="lg:h-[calc(100vh-85px)] h-[calc(100vh-150px)] flex flex-col">
         <TopBar header="Home" />
         <div className="m-auto md:text-7xl text-5xl gap-2 flex items-center justify-center">
           <Logo />