Docs
Footer

Footer

网站底部链接和社交媒体图标的组件

Version: v1.0

自动安装

使用以下命令之一自动安装组件，根据你的包管理器选择：

npx tofu-ui-cli@latest add footer

手动安装 (可选)

注意
如果你使用手动安装，将无法获取更新

如果你需要手动安装，请在项目目录中创建如下路径文件：

components/ui/tofu/footer.tsx

然后复制此代码：

/**
 * TofuUI Footer 脚部组件
 * @author shuakami
 * @version 1.0.0
 * @copyright ByteFreeze&TofuUI
 */
 
import React from 'react';
import Link from 'next/link';
import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from 'react-icons/fa';
 
interface FooterLink {
    label: string;
    url: string;
    external?: boolean;
}
 
interface FooterProps {
    title: string;
    description: string;
    links: {
        primary: FooterLink[];
        secondary: FooterLink[];
        tertiary: FooterLink[];
    };
}
 
const Footer: React.FC<FooterProps> = ({ title, description, links }) => {
    return (
        <footer className=" py-12 px-6">
            <div className="container mx-auto">
                <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-8">
                    <div>
                        <h2 className="text-2xl mb-4">{title}</h2>
                        <p className="text-tofu-black-ds dark:text-tofu-dark-ds">{description}</p>
                    </div>
                    <div>
                        <h3 className="text-sm text-tofu-dark-ds dark:text-tofu-dark-ds mb-4">Main Links</h3>
                        <ul className="space-y-2">
                            {links.primary.map((link, index) => (
                                <li key={index}>
                                    {link.external ? (
                                        <a
                                            href={link.url}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="text-tofu-black text-xs dark:text-tofu-light"
                                        >
                                            {link.label}
                                        </a>
                                    ) : (
                                        <Link href={link.url} className="text-tofu-black  text-xs dark:text-tofu-light">
                                            {link.label}
                                        </Link>
                                    )}
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div>
                        <h3 className="text-sm text-tofu-black-ds dark:text-tofu-dark-ds mb-4 ">Secondary Links</h3>
                        <ul className="space-y-2">
                            {links.secondary.map((link, index) => (
                                <li key={index}>
                                    <Link href={link.url} className="text-tofu-black text-xs dark:text-tofu-light">
                                        {link.label}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div>
                        <h3 className="text-sm text-tofu-black-ds dark:text-tofu-dark-ds mb-4">Other Links</h3>
                        <ul className="space-y-2">
                            {links.tertiary.map((link, index) => (
                                <li key={index}>
                                    {link.external ? (
                                        <a
                                            href={link.url}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            className="text-tofu-black text-xs dark:text-tofu-light"
                                        >
                                            {link.label}
                                        </a>
                                    ) : (
                                        <Link href={link.url} className="text-tofu-black text-xs dark:text-tofu-light">
                                            {link.label}
                                        </Link>
                                    )}
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
                <div className="flex flex-col md:flex-row justify-between items-center pt-8">
                    <p className="text-tofu-black-ds mb-4 md:mb-0 text-sm dark:text-tofu-dark-ds">
                        &copy; {new Date().getFullYear()} {title}. All rights reserved.
                    </p>
                    <div className="flex space-x-7">
                        <a href="#" className="text-tofu-black-icon dark:text-tofu-light-icon hover:text-black transition duration-300">
                            <FaFacebook size={17} />
                            <span className="sr-only">Facebook</span>
                        </a>
                        <a href="#" className="text-tofu-black-icon dark:text-tofu-light-icon hover:text-black transition duration-300">
                            <FaTwitter size={17} />
                            <span className="sr-only">Twitter</span>
                        </a>
                        <a href="#" className="text-tofu-black-icon dark:text-tofu-light-icon hover:text-black transition duration-300">
                            <FaInstagram size={17} />
                            <span className="sr-only">Instagram</span>
                        </a>
                        <a href="#" className="text-tofu-black-icon dark:text-tofu-light-icon hover:text-black transition duration-300">
                            <FaLinkedin size={17} />
                            <span className="sr-only">LinkedIn</span>
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    );
};
 
export default Footer;

导入组件

import { Footer } from "@/components/ui/tofu/footer.tsx";

使用组件

<Footer
  title="Your Site Name"
  description="Your site description here."
  links={{
    primary: [{ label: 'Home', url: '/' }],
    secondary: [{ label: 'About', url: '/about' }],
    tertiary: [{ label: 'Contact', url: '/contact' }]
  }}
/>

参数说明

参数名类型默认值说明
titlestring必填网站的标题
descriptionstring必填关于网站的简短描述
links{ primary, secondary, tertiary: FooterLink[] }必填分组链接，每组可以配置为内部或外部链接

FooterLink

参数名类型默认值说明
labelstring必填链接的显示文本
urlstring必填链接的URL地址
externalbooleanfalse是否在新窗口打开链接，默认不开启
dropdown-menuheader