Files
astro-simple-template/src/apps/footer.tsx
2025-11-25 09:39:41 +08:00

41 lines
1.3 KiB
TypeScript

import { wrapBasename } from "@/modules/basename"
export const Footer = () => {
const links = [
{
href: wrapBasename('/'),
label: '主页',
},
{
href: wrapBasename('/docs'),
label: '文档',
},
]
return (
<footer className="fixed bottom-0 w-full bg-white border-t border-gray-200 shadow-lg">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
{/* 链接区域 */}
<nav className="flex flex-wrap justify-center items-center gap-2 sm:gap-4 mb-3">
{links.map((link) => (
<a
key={link.href}
href={link.href}
className="relative px-4 py-2 text-sm sm:text-base font-medium text-gray-600 hover:text-blue-600 transition-all duration-300 ease-in-out
before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 before:transition-all before:duration-300
hover:before:w-full active:scale-95"
>
{link.label}
</a>
))}
</nav>
{/* 版权信息 */}
<div className="text-center text-xs sm:text-sm text-gray-500">
&copy; 2025 Daily Question
</div>
</div>
</footer>
)
}