Footer

The Footer component provides a clean and consistent bottom section for your website, featuring branding, navigation links, and essential site information. Built with Tailwind CSS for Next.js and React.js projects, it ensures a responsive design across all devices.

It also includes dynamic handling of the current year using JavaScript, keeping your copyright notice automatically up-to-date.

Footer preview

1. Setup codes

Before you setup this component, please add the common components

• App Logo component
• Section Spacer component
• Container component

1.1 Create all constant URLs

Create a new file constants/routes.ts, this file include all routes URL and Navigation links (for both TopBar and Footer component), you can change base on your purpose.

js
export const NAVIGATION_LINKS = [
  { name: "My Projects", path: ROUTES.myProjects },
  { name: "About Me", path: ROUTES.aboutMe },
  { name: "Contact Me", path: ROUTES.contactMe },
];

1.2 Create getCurrentYear common function

Create a new file utils/date.ts, then add getCurrentYear function

js
export const getCurrentYear = () => new Date().getFullYear();

1.3 Setup BrandName environment variable

We will set up an environment variable called BrancName, which stores the name of your application. It is very useful because later you can easily update your app's name, and it also helps maintain consistency of the app name throughout the project.

In the .evn file (or .env.local - at the root of folder) you paste the code below

json
BRAND_NAME="your-app-name"

In the appConfig.ts file (at the root of folder) you paste the code below

ts
/* eslint-disable import/no-anonymous-default-export */
export default {
  BRAND_NAME: process.env.BRAND_NAME,
};

1.4 Create Footer component

Create a new file components/layouts/common/Footer.tsx, then paste the codes below

jsx
import React from "react";
import Link from "next/link";

import appConfig from "@/appConfig";
import AppLogo from "@/components/ui/AppLogo";
import Container from "@/components/ui/Container";
import SectionSpacer from "@/components/ui/SectionSpacer";
import { NAVIGATION_LINKS } from "@/constants/routes";
import { getCurrentYear } from "@/utils/date";

const Footer = () => {
  return (
    <footer className="flex items-center justify-center gap-6">
      <SectionSpacer>
        <Container>
          <div className="py-8">
            <AppLogo className="mx-auto" />
            <nav className="mt-10 text-sm" aria-label="quick links">
              <div className="-my-1 flex justify-center gap-x-6">
                {NAVIGATION_LINKS.map((link) => (
                  <Link key={link.path} href={link.path}>
                    {link.name}
                  </Link>
                ))}
              </div>
            </nav>
          </div>

          <p className="mb-12 mt-0 text-center text-sm text-slate-500 sm:mt-6">
            Copyright &copy; {getCurrentYear()} {appConfig.BRAND_NAME}. All rights reserved.
          </p>
        </Container>
      </SectionSpacer>
    </footer>
  );
};

export default Footer;

2. Usages

Now you can use the Footer component at the bottom of any Layout components

jsx
import React, { ReactNode } from "react";

import Footer from "./common/Footer";
import TopBar from "./common/TopBar";

const DefaultLayout = ({ children }: { children: ReactNode }) => {
  return (
    <div className="flex min-h-screen flex-col">
      <TopBar />
      <main className="flex-1">{children}</main>
      <Footer />
    </div>
  );
};

export default DefaultLayout;

The UI like that

You can refer more the TopBar component, it is very useful to combine with Footer component.