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
Prop | Type | Default |
---|---|---|
children? | ReactNode | - |
copyRight | string | - |
links | Links object array | - |
social | Social object array | - |