Files
Podcast-Generator/web/src/components/FooterLinks.tsx
hex2077 f64cd498cf feat: 添加日语支持并优化国际化功能
refactor: 重构中间件和路由处理逻辑
fix: 修复音频示例API的错误处理
docs: 更新README和DOCKER_USAGE文档
style: 优化语言切换器样式
chore: 更新.gitignore添加生产环境配置文件
2025-08-25 19:17:16 +08:00

49 lines
2.0 KiB
TypeScript

"use client";
import Link from 'next/link';
import React from 'react';
import { useTranslation } from '../i18n/client'; // 导入 useTranslation
import { usePathname } from 'next/navigation'; // 导入 usePathname
import { getTruePathFromPathname } from '../lib/utils'; // 导入新函数
import LanguageSwitcher from './LanguageSwitcher'; // 导入语言切换组件
/**
* FooterLinks 组件用于展示页脚的法律和联系链接。
* 采用了 Next.js 的 Link 组件进行客户端路由,并使用 Tailwind CSS 进行样式布局。
*
* @returns {React.FC} 包含链接布局的 React 函数组件。
*/
const FooterLinks: React.FC<{ lang: string }> = ({ lang: initialLang }) => {
const { t } = useTranslation(initialLang, 'components'); // 初始化 useTranslation 并指定命名空间
const pathname = usePathname();
const truePath = getTruePathFromPathname(pathname, initialLang); // 使用公共方法获取 lang
// console.log('truePath:', truePath);
const links = [
{ href: `${truePath}/terms`, label: t('footerLinks.termsOfUse') },
{ href: `${truePath}/privacy`, label: t('footerLinks.privacyPolicy') },
{ href: `${truePath}/contact`, label: t('footerLinks.contactUs') },
{ href: '/', label: t('footerLinks.copyright') },
];
return (
<div className="w-full">
{/* 分隔符 */}
<div className="border-t border-gray-200 pt-6 mt-6"></div>
<div className="flex flex-col md:flex-col justify-between items-center">
<nav className="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm text-gray-500">
{/* 遍历链接数组,为每个链接创建 Link 组件 */}
{links.map((link) => (
<Link key={link.href} href={link.href} target="_blank" className="hover:text-gray-900 transition-colors duration-200">
{link.label}
</Link>
))}
</nav>
<div className="mt-4 md:mt-0">
<LanguageSwitcher lang={initialLang} />
</div>
</div>
</div>
);
};
export default FooterLinks;