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
rupali-codes · Feb 11, 2023 · 509e112 · 509e112 · vercel · Feb 11, 2023
1 parent e271af0
commit 509e112
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 5 deletions.
diff --git 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
@@ -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
@@ -0,0 +1 @@
+import { Footer } from "./Footer";
diff --git 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
@@ -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
@@ -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
@@ -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 />