Neody UI
Components

Footer

Usage

  • Organizing the links in a seperate object is recommended, as it allows for easier management and updates.
import { Github, Twitter } from "lucide-react";

const social = [
    {
        name: "GitHub",
        href: "https://github.com/neodyland",
        color: "hover:text-github hover:bg-github",
        icon: Github,
    },
    {
        name: "Twitter",
        href: "https://x.com/neodyland",
        color: "hover:text-twitter hover:bg-twitter",
        icon: Twitter,
    },
];

const links = [
    {
        name: "Resources",
        children: [
                    {
                        name: "About Us",
                        href: "/about",
                    },
                    {
                        name: "Partners",
                        href: "/partners",
                    },
                    {
                        name: "Services",
                        href: "/services",
                    },
                ],
    },
    {
        name: "Support",
        children: [
                    {
                        name: "Discord",
                        href: "https://discord.gg/aaaaaa",
                    },
                    {
                        name: "Contact",
                        href: "/contact",
                    },
                ],
    },
    {
        name: "Legal",
        children: [
                    {
                        name: "Terms",
                        href: "/legal/terms",
                    },
                    {
                        name: "Privacy",
                        href: "/legal/privacy",
                    },
                    {
                        name: "特定商取引法に基づく表記",
                        href: "/legal/jp-payments",
                    },
                ],
    },
];
  • Then, you can use the Footer component like this:
<Footer
    social={social}
    links={links}
    copyRight={`2020-${new Date().getFullYear()} Neody. All rights reserved.`}
    className="text-white font-bold bg-black"
/>
  • You can also wrap a React component around the Footer component to add additional functionality, such as a language switcher or an image.
import Wordmark from "@/assets/wordmark.svg";

import Image from "next/image";
import Link from "next/link";

<Footer
    social={social}
    links={links}
    copyRight={`2020-${new Date().getFullYear()} Neody. All rights reserved.`}
    className="text-white font-bold bg-black"
>
    <Link href="/">
        <Image
            src={Wordmark.src}
            alt="Neodyland"
            width={400}
            height={400}
        />
    </Link>
</Footer>
  • Take a look at the footer on this site's homepage to see it in action.

Props

PropTypeDefault
children?
ReactNode
-
copyRight
string
-
links
Links object array
-
social
Social object array
-

On this page