jsNectar

Overview

The Footer Component is a comprehensive footer solution for websites and applications, featuring a blend of branding information, legal links, and social media connectivity. Designed with modern aesthetics in mind, it provides a structured and visually appealing way to present essential website information and enhance user engagement through social links. Ideal for projects that require a consistent and informative footer across all pages.

Features

Branding Display: Showcases the brand name and copyright information, reinforcing brand presence.
Legal Navigation Links: Offers a dedicated section for legal and policy-related pages, such as Privacy Policy, Terms of Service, and Contact information.
Social Media Links: Facilitates connection with users on various social media platforms, with customizable icons for each.
Responsive Layout: Ensures the footer looks great on devices of all sizes, from mobile to desktop.

Data Structure

Legal Pages

An array of objects where each object represents a navigation link to a legal or informational page:

label (String): The text displayed for the link.
href (String): The URL path that the link directs to.

An array of objects, each containing information about a social media or contact link:

type (String): The type or platform of the social link (e.g., E-Mail, Facebook).
href (String): The URL or mailto link for the social media profile or email address.
label (String): Visible text or description of the link, primarily used for screen readers.
icon (String): The icon class from an icon library (e.g., Carbon) representing the social media platform.

Customization

Branding Text: Modify the branding constant to reflect your brand's copyright statement.
Legal and Social Links: Update the legalPages and socialLinks arrays to include your specific website's legal pages and social media profiles. For social links, ensure the href is correctly set to your profiles' URLs and the icon corresponds to the correct platform icon.
Styling: Utilizes Tailwind CSS for styling, making it easy to adjust the appearance to match your design system. You can customize colors, spacing, and other CSS properties as needed.

Example Usage

Simply include the component in the layout or pages where you want the footer to appear. No props are required for basic usage:

<FooterComponent />

To adjust the content, edit the branding, legalPages, and socialLinks data within the <script setup> section according to your needs.

Usage

To integrate the Footer Component into your Vue or Nuxt application:

Ensure Tailwind CSS is set up in your project for consistent styling.
Copy the component code into a new .vue file within your project's components directory.
Import and use the component in your application's layout or specific pages as needed.

Component Code

<script setup lang="ts">
const branding = '© 2024 jsNectar. All rights reserved.';

const legalPages = [
  {
    label: 'Privacy Policy',
    href: '/privacy-policy',
  },
  {
    label: 'Terms of Service',
    href: '/terms-of-service',
  },
  {
    label: 'Contact',
    href: '/contact',
  },
];

const socialLinks = [
  {
    type: 'E-Mail',
    href: 'mailto:devjsnectar@gmail.com',
    label: 'devjsnectar@gmail.com',
    icon: 'carbon:email',
  },
  {
    type: 'Facebook',
    href: '',
    label: 'jsNectar',
    icon: 'carbon:logo-facebook',
  },
  {
    type: 'Youtube',
    href: '',
    label: 'jsNectar',
    icon: 'carbon:logo-youtube',
  },
  {
    type: 'GitHub',
    href: '',
    label: 'GitHub',
    icon: 'carbon:logo-github',
  },
];
</script>

<template>
  <div class="mt-md lg:mt-lg">
    <footer class="w-full bg-black pb-12 text-sm text-primary">
      <div
        class="mx-auto w-full max-w-7xl justify-between px-2 sm:px-6 md:flex lg:px-8"
      >
        <section
          class="flex flex-row justify-center gap-5 pt-12 md:order-last md:w-1/3 md:justify-end"
        >
          <a
            v-for="link in socialLinks"
            :key="link.label"
            :href="link.href"
          >
            <span class="sr-only">{{ link.label }}</span>
            <Icon
              :name="link.icon"
              size="1.5rem"
            />
          </a>
        </section>
        <section class="mt-12 flex flex-col justify-center gap-3 md:w-1/3">
          <a
            v-for="link in legalPages"
            :key="link.label"
            class="mx-auto"
            :href="link.href"
          >
            <span>{{ link.label }}</span>
          </a>
        </section>
        <section
          class="mt-12 justify-center sm:order-first sm:justify-start md:w-1/3"
        >
          <p class="ms:justify-start flex justify-center">{{ branding }}</p>
          <span class="ms:justify-start mt-3 flex justify-center">
            Made with &hearts; by jsNectar
          </span>
        </section>
      </div>
    </footer>
  </div>
</template>

Footer